This is a good article for store owners on the basics of creating a nested menu in the Shopify backend;
https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links/drop-down-menus
WordPress site owners and developers will recognise this setup immediately. Draggable/droppable menus were introduced into WordPress as one of the flagship features of WordPress 3 in 2010.
As always the Shopify documentation is good – an indeed the example used for nested menus shows how to do it for a three level nested menu;
https://help.shopify.com/en/themes/development/building-nested-navigationHowever…. It’s not an actual working example per se so I’ve done one here if you are putting together a nested menu on your theme. This is a two level example, if you need a three level menu I’d be recommended they try to recategorise the content better, that will be a UX nightmare.
The HTML Output You Want to Achieve
<div class="menu-container"> <nav class="nav-container"> <ul id="main-menu" class="nav-menu"> <li class="menu-item current-menu-item"><a href="/">Home</a></li> <li class="menu-item menu-item-children"><a href="#">Products</a> <div class="sub-menu-wrapper"> <ul class="sub-menu"> <li class="menu-item"><a href="#">Sub menu item 1</a></li> <li class="menu-item"><a href="#">Sub menu item 2</a></li> <li class="menu-item"><a href="#">Sub menu item 3</a></li> <li class="menu-item"><a href="#">Sub menu item 4</a></li> <li class="menu-item"><a href="#">Sub menu item 5</a></li> <li class="menu-item"><a href="#">Sub menu item 6</a></li> </ul> </div> </li> <li class="menu-item menu-item-children"><a href="#">Services</a> <div class="sub-menu-wrapper"> <ul class="sub-menu"> <li class="menu-item"><a href="#">Sub menu item 1</a></li> <li class="menu-item"><a href="#">Sub menu item 2</a></li> <li class="menu-item"><a href="#">Sub menu item 3</a></li> <li class="menu-item"><a href="#">Sub menu item 4</a></li> <li class="menu-item"><a href="#">Sub menu item 5</a></li> </ul> </div> </li> <li class="menu-item"><a href="#">FAQ</a></li> <li class="menu-item"><a href="#">Contact</a></li> </ul> </nav> </div>
The Shopify Liquid Code
<div class="main-container"> <nav class="nav-container"> <ul id="main-menu" class="nav-menu"> {% for link in linklists.mobile-menu.links %} <li class="menu-item{% if link.active %} current-menu-item{% endif %}{% if link.levels > 0 %} menu-item-children{% endif %}"> <a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a> {% if link.levels > 0 %} <div class="sub-menu-wrapper"> <ul class="sub-menu"> {% for sub_link in link.links %} <li class="menu-item{% if link.active %} current-menu-item{% endif %}"> <a href="{{ sub_link.url }}" title="{{ sub_link.title }}">{{ sub_link.title }}</a> </li> {% endfor %} </ul> </div> {% endif %} </li> {% endfor %} </ul> </nav> </div>