Header: Create a simple drop-down/nested navigation

Looking for a multi-column mega navigation? Please refer to this article.

Venue comes with the ability to add a drop-down/nested navigation to one or more of the links in the main menu. You can group products, collections, or pages together to make it easier for customers to navigate your online store. You can have multiple dropdowns if you wish. You dropdowns can also be three levels deep i.e Store > Menswear > Suits, Shirts, Shorts.

First links are not clickable

NB - The first links in sub menus are not clickable and are just used as triggers to open and close sub menus. This is because if the first links were clickable on mobile view it's a frustrating experience as the user thinks they are opening a sub menu but in fact the header/trigger link would just open a collection page. There would be no way to open sub menus.

Pro tip: We recommend that you make the first sub link into an 'everything' type link - so if the header/trigger is 'Tees & knits' then make the first sub link 'All tees & knits' then add the rest of your tees & knits sub links below that. You can see that in action here https://venue-theme-morning.myshopify.com/

Creating a nested menu in the admin

  1. Head to the navigation area of your Shopify admin https://myshopify.com/admin/menus
  2. Create a new menu called 'Main Dropdown' (or edit an existing menu) 
  3. 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 refer to this page in the Shopify Help Centre.
  4. Choose one of the menu items to be the header/trigger for your drop-down menu - usually 'Store' or similar.
  5. Add menu items to include in the new 'Store' drop-down menu. Click 'Add menu item', enter the name of the menu item, and enter or select a destination for the link.
  6. Click and drag the menu items to nest below the header item (see the GIF below)
  7. Click Save menu.


    nesting-menu-items.gif

Adding your new nested menu to your store

  1. Head to the themes area of your Shopify admin https://myshopify.com/admin/themes
  2. Click the Customize button to open the theme editor
  3. Click on the Header section on the panel on the left.
  4. Under the Menu area select the new dropdown you have created - in this case 'Main Dropdown'
  5. Click the Save button to save your changes
  6. Check the dropdown is working as expected.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.