Building Nested Navigations with Shopify Link List

{% forlinkinlinklists.main-menu.links %}

We are using the variablelinkto hold the data relating to each item in the link list, as we loop over all the items. This keywordlinkcould be anything, it’s just a variable for the for-loop to output data for the menu. In order to accesslinkdata, we need to access all thelinksin the link list with a handle ofmain-menu, hencelinklists.main-menu.links.

Remember, the defaultMain Menuthat exists in a Shopify store has the handle ofmain-menu, which is why it’s being used above. If our menu had a handle ofsocial-media, the syntax would be refactored as:

{% for link in linklists.social-media.links %}

Each link item has properties which include:

• url
• title

In the example above,{{ link.url }}will output the url we entered or generated in the Shopify Admin, and{{ link.title }}will output the link text specific to that url.

You might also like:How to Manipulate Images with the img_url Filter.

Multi-level navigation

Now that we have the basic Liquid structure in place for a single level menu, we need to consider how to create a sub-menu for our top level items. Firstly, we need to head back to the Shopify Admin and create our first sub-menu.

It might not be 100 percent clear initially, but every link in a link list, in addition to the menu itself, has a unique handle that we have access to in Liquid.

Let's have a look at an example. If ourmain-menuhas three levels of links as follows:

• Home
• About Us
• Women
• Accessories
• Earrings
• Scarves

What’s great about using nested menus in Shopify is that nested menu items can be obtained directly from their parent link using Liquid. This greatly simplifies the markup required to render a nested menu — meaning you don’t need to know the handle of the parent to render its children.

Here's an example of how we can use these related handles to output a three level deep nested menu:

You'll notice that we’re now introducing anifstatement in our refactored example, directly after we output the first level of our main menu:

{% if link.links != blank %}

Thisifstatement checks to see if a child-link for the current link item in our loop exists. If it does exist, the template moves forward and loops over all the items in the sub menu.

Additionally, in this example we handlechild_linksub-menu and agrandchild_linksub-menu the same way, by checking with anifstatement to see if there’s a child-link for the current link item, and if it does exist, the template loops through and outputs the sub-menu.

In the example above,child_linkis just aforloop variable we use to represent the current item in the loop; it could easily be replaced withsub_link, andgrandchild_linkwithsub_sub_link. We’ve usedchildandgrandchildin this case to illustrate the hierarchy of the nested navigation a bit more clearly.

Final touches

I think it’s important to mention one extra link property that will be very useful when creating menus —link.activeandlink.child_active. These are both boolean properties (true/false) that allow you to easily tell if the current page is active, as well as if it’s nested items are active. The syntax is as follows:

{% if link.active %} class="active {% if link.child_active %}child-active{% endif %}"{% endif %}

In this example, we'll add a CSS class ofactiveif the current page URL is the same as the list item, and a class ofactive-childif the current page is also part of the active nested item. Here's the full code example for completeness:

Start nesting those menus!

Link lists are a very powerful element of the Shopify platform. Having the ability to create an array of list items that can be changed in the admin gives you lots of flexibility. We've seen theme developers use them far beyond menu structures. However, knowing how to create nested navigation that can then be styled with CSS is a great tool to have at your disposal.