Set up drop-down menus in your online store

You can use drop-down menus to group products, collections, or pages together and make it easier for customers to navigate your online store. For example if you have a lot of products, then you might want to add them to collections and then use a drop-down menu from the main menu to organize the collections. This can help customers find the type of products that they're looking for.

You can also add, remove, or edit menu items in drop-down menus or in your default menus.

Note

Footer menus can display only top-level items. Drop-down menus can't be used in your online store footer.

You can view and change your online store menus from Content > Menus in your Shopify admin.

Note

In most cases, you need to create an item before you can link to it. For example, you need to create a collection before you can add the collection to a menu.

Nesting menu items to build drop-down menus

You can build drop-down menus by creating or moving menu items so that they're nested below a top-level item. The top-level item displays in the main menu on your online store, and the nested menu items display in a drop-down menu. The top-level item can have up to two levels of nested drop-down menus.

All themes will display nested items as drop-down menus from the main menu, and some themes will display nested items as drop-down menus in other locations.

The main menu and drop-down menus display in different locations in your online store depending on your theme. Some themes display an icon beside the name of a drop-down menu in the main menu to help customers recognize that a drop-down menu is there.

Note

Make sure that you update your theme so that it displays all three menu levels on your online store.

Add a drop-down menu from the main menu

You can add a drop-down menu from any of the menu items in the main menu.

Steps:

Desktop

1. From your Shopify admin, go to Content > Menus.

2. Click the name of your main menu.

3. Choose one of the main menu items to be the header of your drop-down menu, or add a new menu item. If you don't want the header to link to anything, then enter # in the Search or paste a link field for the header menu item.

4. To add a menu item to include in the drop-down menu, complete the following tasks:

   1. Click Add menu item.
   2. In the Name field, enter a name for your menu item.
   3. In the Search or paste a link field, enter or select a destination for your menu item.

5. Click Add, and then click and drag the menu item to nest it below the header menu item.

6. Click Save menu.

iPhone

1. From the Shopify app, tap the button.

2. Tap Content > Menus.

3. Tap the name of your main menu.

4. Choose one of the main menu items to be the header for your drop-down menu, or add a new menu item to be the header. If you don't want the header to link to anything, enter # in the Search or paste a link field for the header menu item.

5. To add a menu item to include in the drop-down menu, complete the following tasks:

   1. Tap Add menu item.
   2. In the Name field, enter a name for your menu item.
   3. In the Search or paste a link field, enter or select a destination for your menu item.

6. Tap Add, and then tap and drag the menu item to nest it below the header menu item.

7. Tap Save.

Android

1. From the Shopify app, tap the button.

2. Tap Content > Menus.

3. Tap the name of your main menu.

4. Choose one of the main menu items to be the header for your drop-down menu, or add a new menu item to be the header. If you don't want the header to link to anything, enter # in the Search or paste a link field for the header menu item.

5. To add a menu item to include in the drop-down menu, complete the following tasks:

   1. Tap Add menu item.
   2. In the Name field, enter a name for your menu item.
   3. In the Search or paste a link field, enter or select a destination for your menu item.

6. Tap Add, and then tap and drag the menu item to nest it below the header menu item.

7. Tap ✓.

Note

You can change the default main menu for most themes by editing the settings in the theme's Header section.

Footer menu integration

Drop-down menus can also be implemented in footer menus.

Steps:

1. From your Shopify admin, go to Content > Menus.
2. Optional: Follow the same nesting principles used for main menus, such as dragging menu items under a header item to create a drop-down structure by clicking and dragging the items into place.
3. Enter # in the Link field for header items that shouldn't link to a page (for example, "Support" or "Explore" headers).

Theme compatibility considerations

Review the following considerations for adding drop-down menus to your theme:

• Most themes support up to two levels of nested drop-down menus. Check your theme's documentation or test nested items to confirm compatibility.
• Some themes may require CSS adjustments to improve mobile usability. Don't customize your theme if you aren't familiar with theme code. Learn more about customizing your theme.

Determining whether your theme supports nested drop-down menus

To determine if your current theme supports the maximum number of nested drop-down menu levels you want to implement, you can use the following resources:

1. Check your theme's documentation: Review the theme's documentation for specific information about menu capabilities and supported nesting levels.

2. Test the nested items: Create a test menu structure with your desired number of nested levels and verify that it displays correctly on both desktop and mobile devices.

Most themes support up to two levels of nested drop-down menus. If you're experiencing issues with drop-down menus, verify that your theme supports the number of nested levels you're trying to implement, as some themes might require additional customization to support multiple levels of nesting.

Best practices for drop down menus

Review the following best practices to create an useful menu structure that works well across all devices.

• Use descriptive labels, such as "Shop by Category", for top-level menu items with # links.

• Ensure that menus are optimized on mobile devices. You can test menus on mobile devices to confirm that drop-down menus expand as expected.

• Add seven or fewer top-level menu items to avoid overcrowding.

• Use clear and descriptive link titles. For example "Collections" and "Summer dresses".

Troubleshooting common issues

Review the following solutions to common problems you might encounter when setting up navigation menus:

• Mobile menu redirects: If a top-level menu link redirects to a new page when you tap it, then check the menu in your Shopify admin to confirm that the menu link field is #.

• Visibility issues: If nested items don't display, then make sure that they're dragged fully under the header item and indented in the Menus interface. Confirm that your theme supports the number of nested levels that you have set up.

• Theme compatibility: If you're experiencing issues with drop-down menus, verify that your theme supports the number of nested levels you're trying to implement. Some themes might require additional customization to support multiple levels of nesting.

Customizing theme code for drop-down menus

For themes requiring deeper customization, you can consider customizing your theme code.

Caution

Customize your theme code only if you're comfortable working with Liquid, HTML, CSS and JavaScript. Incorrect changes can break your store's functionality.