Organize site links into dropdown menus to streamline your site navigation, group related pages, and clear header space.

Use dropdowns to create navigation sub-menus on your site. You can add multiple dropdowns for different menus. However, you can’t nest dropdowns inside other dropdowns.

Video: How to add a dropdown menu

This one-minute video walks through adding a dropdown menu to your website navigation.

Add a dropdown menu to your site navigation

To add a dropdown:

1. Open the Pages panel and click the + icon.
2. Click Dropdown.
3. The empty dropdown will appear in the pages panel. Enter a title for the dropdown to display in the navigation.

Add pages to a dropdown menu

Dropdowns aren't pages and it's not possible to add content directly to them. Instead, when you add pages to a dropdown, they appear as menu items that "drop down" from your navigation when a visitor hovers over it.

To add an existing page to the dropdown:

1. Open the Pages panel.
2. Under the desired dropdown, drag and drop a page into the space below the dropdown. To add a new page, click Add Page below the dropdown.
3. To change the order of the pages, drag and drop them within the dropdown.

What happens when I link to a dropdown menu?

If you navigate directly to a dropdown's URL, it redirects to the first page in the dropdown. If the dropdown doesn't have any pages, you'll see "This folder does not contain any pages." It's not possible to change this text or add other content.

Can I add an index page to a dropdown menu? (version 7.0)

No. You can add any type of page to a dropdown except an index page. To direct visitors to an index page, choose Link, click Click to add URL, and use the Content tab to point the link to your index page. For more information about setting up links, visit Adding links to your site.

Customize dropdown icons

On version 7.1, if you have at least one dropdown on your site, you can choose an icon to display beside your dropdowns when visitors navigate to your site on a computer.

To customize your dropdown icon:

1. Click Edit in the top-left corner of your site preview.
2. Hover over the header and click Edit site header.
3. Click the navigation links, click the pencil icon, then click Design.
4. Click the Icon dropdown menu and select an icon, or select the none icon to display dropdowns without an icon. This applies to all dropdowns on your site.
5. (Optional) Customize the Size, Thickness, Spacing, and Roundness of the icon. Depending on your selected design, some customization options may not appear. For example, it's not possible to change the roundness of a circular icon.

Can I change the dropdown icon on mobile?

No. Your mobile navigation displays an arrow beside dropdowns by default. You can’t customize or hide this icon.

Customize the background color of a dropdown menu

On version 7.1 sites, your dropdown background color depends on your header style:

• Solid - Background color follows either the Background color tweak in your header settings, or the site-wide Section Background tweak for the theme you select for the header.
• Gradient - Background color follows the Background color tweak in your header settings.
• Adaptive - Background color follows the site-wide Section Background tweak for the theme of the first section on the page.

You can change the header background effects and colors. For a list of the version 7.0 tweaks that set this color, see Dropdown display by template.

Delete a dropdown menu

If you delete a dropdown, its pages will also be deleted.

To delete a dropdown:

Tip: You can restore the pages within 30 days.

Product category nested menus (version 7.1)

Product categories create a separate navigation at the top of your store.

On store pages in version 7.1, you can create nested subcategory menus. To learn more, visit Organizing products.

Store pages in version 7.0 have category navigation, but it's not possible to display nested subcategories.