Shopify – Using Nested Menus in Theme

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-navigation

However…. 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 re-categorise 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>