Venue - Header - Create a simple drop-down/nested navigation

This article covers creating a dropdown/nested menu navigation, if you are looking for a multi-column mega navigation style menu, please refer to our Header: Create a multi-column nested menu (Mega Navigation) article.

Venue comes with the ability to add a drop-down/nested navigation to one or more of the menu items in the main menu. Grouping relevant pages together allows you to create logical navigation paths for your customers to find the exact page that they are looking for.

Each dropdown can contain up to three menu levels, here's an example using three levels, Store, Accessories, and Headware

Information

On mobile, the second-level menu items are not clickable and are instead used as triggers to open and close the third-level menu. This ensures a smooth user experience and avoids any difficulty in moving between the three menu levels when using the thumb to navigate on the smaller screen size.

On desktop, you can choose if you would like to make the second level clickable, by checking the box for "Enable clickable parent links" this option can be found in the Header settings.

Creating a nested menu in the admin

1: Log into your Shopify store admin.
2: Click on Online Store then Navigation in the side menu to get to the themes area of your admin.
3: Create a new menu called 'Main Dropdown' (or edit an existing menu).
4: Add your most important links to the new 'Main Dropdown' menu using the new drag-and-drop editor - typically links such as as 'Store' 'About us' 'Blog' 'Contact us'. If you need more guidance on menus please the Menu and links article in the Shopify Help Centre.
5: Choose one of the menu items to be the header/trigger for your drop-down menu - usually 'Store' or similar.
6: Click and drag the menu items to nest below the header item (see the GIF below).
7: Click Save menu.

Adding your new nested menu to your store

1: Log into your Shopify store admin.
2: Click on Online Store then Themes in the side menu to get to the themes area of your admin.
3: Click the Customize button next to your active theme.
4: Click on the Header section on the panel on the left.
5: Under the Menu area select the new dropdown you have created - in this case 'Main Dropdown.
6: You can make the second level menu items clickable on desktop by check the box Enable clickable parent links.
7: Click the Save button to save your changes.
8: Check that the dropdown menu is working as expected.

Insight

We recommend having the first menu item on your second level be a universal type option, this will be useful for customers who are not looking for something very specific and may prefer to browse a wider range of pages or products.

You can see this in action on our demo store where we have a first level menu item called "Tees & knits" with the first option of the second level being "All tees & knits" followed by more specific options. You can find a link to the demo here.