October 17, 2021

How to add shopify navigation bar menu

In this snippets we are going to use Handle. Handles are used to access to the attributes of Liquid objects. There are some most uses objects in shopify like products, collections, blogs, articles, menu have handles.

<link rel="stylesheet" href="{{ 'bootstrap.min.css' | asset_url }}" media="print" onload="this.media='all'">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0"> {% for link in linklists.main-menu.links %} <li class="nav-item">
                    <a class="nav-link" href="{{link.url}}">{{link.title}}</a>
                </li> {% endfor %} </ul>
        </div>
    </div>
</nav> 

{% schema %} 
{ 
"name": "Navigation Bar", 
"settings": [ 
{ 
"type": "link_list", 
"id": "menu", 
"default": "main-menu", 
"label": "Menu Patel" } 
] 
} 
{% endschema %}

Screen Shot

Shopify Naviagtion menu schema settings - tolmatol

Leave a Reply

Your email address will not be published. Required fields are marked *