Emerging Trend For Any Shopify Development Company: Nested Navigations With Link Lists

Getting nested navigation in eCommerce websites is a trendy solution adopted by Shopify development companies nowadays.  A Shopify link list is effective for organizing pages, products & collections to point a product within or outside of store domain.

Moreover these links can be used for varied purposes which we’re going to discover along with step by step guidance on process of creating a nested navigation from an unordered list. One can have full control over the menus present within admin login page, providing full flexibility to merchant operations for store.

How to Create Nested Navigation’s

Shopify added the ability of creating three level deep nested navigation menu from a single page since 2017.  This process was previously performed with the creation of separate menus using multiple menus and controller ability tied to its parent menu link.

Now new created stores will have individual nesting menus consisting easy drag-drop and menu item lists which means elimination of link handing to menu names process.

Since inclusion of navigation in layout file is a common scenario, one can choose theme.liquid for testing the concept of nested navigation in any present template.

How to Create Navigation Menu

Let’s begin with creating new menu through parent menu, click on the navigation tab present in Admin below online store linked with sidebar.

The newly created stores have a predefined menu known as “Main Menu” in default.  For adding more items you just need to click on “add another” button and simply define “link name” and destination for added item.  The drop down menu in select will help you in easy linking of internal sections like specific product or collection.  You can also enter a URL (both internal and external) by selecting web address from available options.  Afterwards we’ll proceed towards “liquid code” required to make this an output in our theme

One can also use multi-level navigation by drag & drop nested menu items by putting a bit of JavaScript and CSS styles for “super-menu” or “drop-down menu”.

How to Output Menu

To get an output menu in theme files we need to understand “Handle” in the menus. These are unique identifiers for variable and class including: products, collections, link lists, pages etc.

Here’s an example on outputting all present items from a main menu link by using traditional FOR loop:

<ul>
 {% for link in linklists.main-menu.links %}
 <li><a href= "{{ link.url }}">{{ link.title }}</a></li>
 {% endfor %}
</ul>

The keynote here is “FOR” loop inclusion around each <li>

“{% for link in linklists.main-menu.links %}”

The variable link is being used here to hold data for every item present in the list when loop is executed over all items. Here keyword link can be anything since it’s a variable in for-loop to get output data. If you require to get access link data, just access all the present links in the link list with identifiers of main-menu.  It’s also noticeable that default “main menu” present in Shopify store now already have required identifiers.

Suppose if menu had identifiers of social-media, then syntax would be:

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

Here each link item has different properties like:

• URL
• TITLE

In above mentioned example; {link.url} will return URL entered by user or generated in Shopify Admin, and {link.title} will return link text for that URL.

How to Create Multi-level Navigation

With the presence of basic Liquid structure for single level menu, it’s important to create a sub-menu for primary items. Just log-in to Shopify Admin for creating our initial sub-menus.  Initially it might be bit confusing, but each present link in the link list has its own unique identifier having access to Liquid. Suppose a main-menu having links in three levels:

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

The best part about nested menus in Shopify is that items can be gained directly from parent link by using Liquid. It simplifies the required markups for rendering nested menu or no need to be aware about parent identifiers to render its children.

Let’s have another example about using related identifiers to gain a three level deep nested menu output:

<ul class="parent">
{% for link in linklists.main-menu.links %}
<li><a href="{{ link.url }}">{{link.title }}</a>
{% if link.links != blank %}
 <ul class="child">
 {% for child_link in link.links %} 
 <li><a href= "{{ child_link.url }}">{{ child_link.title }}</a>
 {% if child_link.links != blank %}
 <ul class="grandchild">
 {% for grandchild_link in child_link.links %} 
 <li><a href= "{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
 {% endfor %}
 </ul>
 {% endif %} 
 </li>
 {% endfor %}
 </ul> 
{% endif %} 
</li>
{% endfor %}
</ul>

Then if condition will check for availability of child-link in current link item within the loop. If available, then template moves forward and runs over present list of items in sub menu. The child link sub-menu and grandchild link sub-menu are treated in same way, again verifying If condition to discover any child link present for present link items, again if not present, then template runs to output sub-menu.

The child link is a loop variable utilized for present items and is replaced with a sub link, and grandchild link with sub-sub link.  To clarify, these child and grandchild links are used to demonstrate hierarchy of nested navigation’s.

Here’s another example to mention a link property which is useful for creating menus: link.active and link.child_active just like Boolean properties (true/false) to discover the status of current pages and their nested items like shown below:

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

In above mentioned code, additional CSS class active will be done if current page URL is similar to list items, and CSS class of active-child if page is involved in addition with active nested items.

Have a look on coding now:

<ul class="parent">
{% for link in linklists.main-menu.links %}
<li {% if link.active %}class="active {% if link.child_active %}child-active{% endif %}"{% endif %}><a href="{{ link.url }}">{{ link.title }}</a>
{% if link.links != blank %}
 <ul class="child">
 {% for child_link in link.links %} 
 <li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ child_link.url }}">{{ child_link.title }}</a>
 {% if child_link.links != blank %}
 <ul class="grandchild">
 {% for grandchild_link in child_link.links %} 
 <li {% if grandchild_link.active %}class="active {% if grandchild_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
 {% endfor %}
 </ul>
 {% endif %} 
 </li>
 {% endfor %}
 </ul> 
{% endif %} 
</li>
{% endfor %}
</ul>  

Conclusion:

Using a link list on Shopify can be really useful, since it gives the flexibility to create a list item array in admin login. Developers from a huge number of Shopify development company have used them beyond menu structures.  However knowledge of creating nested navigation styled with CSS has been a great tool for Shopify UAE at disposal.