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.
- Shopify menus go three levels deep (parent, child, grandchild); most current themes display all three.
- For multi-column dropdowns with images and featured content, you need a mega menu.
To create a dropdown menu in Shopify, go to Online Store > Navigation, open your main menu, add the items, then drag each child item to the right under its parent and save.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also build Fudge, the AI operator for Shopify stores, with a 4.9 rating on the Shopify App Store. Custom menus are one of the changes its store editor makes in a theme.
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.
For how the dropdown shows up on phones, see how to change the mobile menu in Shopify.
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 menus go three levels deep: parent > child > grandchild.
Dawn and most current themes show the third level as a nested list inside the dropdown; some older themes only show two.
Before building a three-level navigation structure, check it in your theme’s preview. If the grandchild links don’t display, 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. Some themes, including Dawn, have a basic mega menu setting in the Header section, but images and featured products need a premium theme, an app or custom code.
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.
FAQ
How many items should a Shopify dropdown menu have?
3–8 per parent is the practical sweet spot. Under 3, the dropdown adds friction without payoff (just put the items in the top nav). Over 8, the list scans poorly and shoppers miss items below the fold. If you have 10+, use a mega menu instead — multi-column layouts handle larger sets visually.
Why doesn't my Shopify dropdown appear when I hover?
Three usual causes: (1) the items aren't actually nested (they look indented but aren't — drag the handle further right until you see clear indentation), (2) the parent has no children visible due to a theme bug, or (3) the theme uses tap-only on touch-enabled desktops. Inspect the rendered HTML — child <ul> should appear under the parent <li>.
Can I add icons or images next to Shopify dropdown items?
Not via the native navigation editor — Shopify Navigation only supports plain text labels and URLs. Cleanest fix: describe what you want to Fudge ("show a Lucide icon next to each dropdown item, mapped by handle") and it edits the header Liquid to render an SVG per item. Alternatives: a mega-menu app or a premium theme with nav metafield support.
Should dropdown parent items link to a page or be label-only?
Linking the parent is generally better for SEO and usability. A "Women" parent that goes to /collections/women gives clicking the label a meaningful destination, helps Google understand the site hierarchy, and serves shoppers who want the broad category instead of a sub-collection. Label-only parents work when no canonical destination exists.
Do Shopify dropdown menus affect SEO?
Yes, modestly. Dropdowns are an internal-linking signal — pages linked from the main navigation are crawled and weighted more heavily by Google. Including key collections in dropdowns surfaces them across every page, which builds internal link equity. Don't dropdown-cram: 30+ links in nav can dilute the signal.
