Mega-menu navigation
Create a full width drop-down menu with multiple columns
Last updated
Create a full width drop-down menu with multiple columns
Last updated
Shopify allows you to nest menus and menu items in the Online Store Navigation Editor. By nesting menu items, you can visually build multi-level menus like the following:
3-level nested navigation (mega-menu style):
2-level nested navigation (drop-down style):
These examples are built using the Navigation Editor for the Online Store:
3-level mega-menu version
To generate a mega-menu style navigation, you'll need three levels of menus. The top menu or parent menu will contain another level of menus, child menus. These children menus are your second level menu items which will be displayed as column headings. They will contain another level of menu-items, grand-children. These are displayed as menu items in each column.
Here are the three layers outlined:
With the Online Store Navigation Editor, you can use drag and drop to nest these menus. Here's how a portion of the above navigation is setup:
The top level menu "Wines" has 4 second level menus - "Pinot Noir", "Travel Rosé", "Pinot Gris" and "Chardonnay".
In the above example for "Chardonnay", we then nest another level of menus which are the vintages for that product.
You can drag an entire menu below another menu to create a new layer.
To learn more about how nesting is done in the Online Store Navigation Editor, follow Shopify's support articles: https://help.shopify.com/en/manual/online-store/legacy/menus-and-links
Tips for creating your mega-menu:
For best results, your top-level menu drop-down should have 3-4 columns. If you need additional columns, consider a second top-level mega-menu or drop-down.
Example: Wine (top-level) -> 4 columns (Pinot Noir, Travel Rosé, Pinot Gris, Chardonnay). Each of these will have menu items within (like vintage years).
Balance the number of items in each column to help reduce white-space in your columns. If one column as less items than the others, consider placing that column first or last.
Columns can be reordered using drag-and-drop:
Example with Chardonnay moved to the left and Travel Rosé moved up as well to keep second postion in the mega-menu:
