Key takeaways
- Go to Online Store > Navigation > edit menu > drag a menu item to the right under a parent item to nest it.
- The parent item becomes the dropdown label; child items appear when the customer hovers or clicks.
- Most Shopify themes support 1-2 levels of nesting.
- For multi-column dropdowns with images and featured content, you need a mega menu.
A dropdown menu groups related navigation items under a parent label. It keeps the top navigation clean while making many pages accessible. Here’s how to create one.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 rating on the Shopify App Store.
How to create a dropdown menu in Shopify
Step 1. Go to Online Store > Navigation.
Step 2. Click the menu you want to edit (usually Main menu).
Step 3. If the parent item (the top-level dropdown label) doesn’t exist yet, click Add menu item, give it a name (e.g., “Shop” or “Collections”), and set its link. If it should only be a label with no destination, leave the link blank.
Step 4. Add the items you want in the dropdown the same way - click Add menu item for each one and set their names and links.
Step 5. Now nest the child items under the parent. Hover over a child item to reveal the drag handle on the left. Drag the item to the right and slightly below the parent item. You’ll see it indent when it’s nested.
Step 6. Repeat for each item you want in the dropdown.
Step 7. Click Save menu.
When customers hover over or click the parent item in your store, the nested items appear as a dropdown list.
How to nest items under an existing parent
If you already have a top-level item and want to move existing items under it:
Hover over the item you want to nest, grab the drag handle, and drag it to the right until it indents under the target parent item. Save.
How deep can you nest in Shopify?
Shopify’s navigation system supports two levels of nesting technically: parent > child > grandchild.
However, most themes only visually display one level of dropdown. A grandchild item may appear in the menu data but won’t show up in the rendered navigation on most themes.
Before building a three-level navigation structure, test how your theme handles it. If it doesn’t display correctly, the practical solution is to flatten your structure to one level of dropdown.
Dropdown vs mega menu
A standard dropdown shows a single vertical list of links. This works well for 3-8 items per parent.
A mega menu shows a wide panel with multiple columns, images, featured products, and custom layouts. It’s a different thing entirely - most Shopify themes don’t support mega menus natively through the navigation editor.
If you have 10+ collections, want images in your nav dropdown, or want to feature a promotional section inside the navigation, you need a mega menu. See our guide on how to create a mega menu in Shopify.
The parent item link when creating dropdowns
When a nav item has children nested under it, customers will see the parent label in the navigation. You have two options for the parent’s link:
Option 1 - Give the parent a destination. For example, a “Women” parent that links to /collections/women. Customers who click directly on “Women” go to that collection. The dropdown shows sub-collections.
Option 2 - Leave the parent link empty. The parent label has no destination - clicking it just opens the dropdown. Use this when the parent is a category label and there’s no meaningful single page it should point to.
Both approaches are valid. Option 1 is generally better for SEO and usability because every label is navigable.
Mobile dropdown behaviour
On mobile, dropdown menus typically convert to an expandable accordion in the mobile menu drawer. Tapping the parent item expands the dropdown inline, rather than showing a hover overlay.
The exact mobile treatment depends on your theme. It’s worth testing the mobile navigation after setting up your dropdowns to make sure it renders well on small screens.
