Story theme
Story v1
Story v1
  • Story theme documentation
  • Explore Story
  • Pages
    • Page navigation
    • How to use page templates
      • Story page templates when using a different theme
    • Contact page
    • Lookbook
    • Team
    • Timeline
  • Blogs
    • Blogs
    • Articles
  • Homepage Sections
    • Blog posts
    • Collection list
    • Featured collection
    • Image with text
    • Image with text overlay
    • Logo list
    • Slideshow
    • Featured product
    • Newsletter
    • Map
    • Page
    • Rich text
    • Team
    • Testimonials
    • Text columns with images
    • Timeline
    • Video
  • Collections
    • Collection filtering
    • Product stickers
    • Collection sorting
    • Badges
  • Header
    • Transparent header
    • Promotional announcement bar
    • Mega-menu navigation
    • Drop-down navigation
  • Products
    • Product tabs
    • Product long template
      • Product long template when using a different theme
    • Product image sizes
  • Settings
    • Tile decoration
    • Enable container
  • Updates
    • Story Releases
    • Check your theme version
    • How to download latest version
    • Migrating your settings
  • Tips
    • Where to make CSS changes
    • How to add a line break in your headings
  • Advanced
    • Story tutorials
    • Remove Shopify link in footer
  • Contact
    • Share preview link
Powered by GitBook
On this page
  1. Header

Mega-menu navigation

Create a full width drop-down menu with multiple columns

PreviousPromotional announcement barNextDrop-down navigation

Last updated 4 years ago

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:

Setup example

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.

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:

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
Wines (1), Chardonnay (2), Vintage items (3)
Clearance and Under $100 become items under Sale
4 columns with a balanced number of items reduces white-space