Story theme - Nested navigation examples

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):

Note: These examples are built using the Navigation Editor for the Online Store. If you have an app installed for navigation, please refer to their specific instructions on building menu items. 

Examples

Here are samples of how we've built these menus. 

3-level 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 four second level menus - "Pinot Noir", "Travel Rose", "Pinot Gris" and "Chardonnay". 

In the above example for "Chardonnay", we then nest another level of menus which are the vintages for that product. 

Here is the complete menu for this navigation:

2-level version

To create a drop-down style menu in your navigation, you'll only need two levels; the main top-level menu and then menu-items below. 

Example in Navigation Editor: