October 17, 2021

How to add dropdown navigation bar menu

You will learn how to create drop down menu in shopify using bootstrap, in this article we are using handles to select menu we’ve created two level menu.

<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 {% if link.links != blank %} dropdown {% endif %}"
    
   {% comment %} 
    
    {% if link.active %}class="active {% if link.child_active %}child-active{% endif %}"{% endif %}
    
     {% endcomment %}
    >
  <a class="nav-link {% if link.links != blank %}dropdown-toggle{% endif %}"
     {% if link.links != blank %} role="button" data-bs-toggle="dropdown" aria-expanded="false" {% endif %}
     href="{{ link.url }}">{{ link.title }}</a>
{% if link.links != blank %}
  <ul class="dropdown-menu" >
    {% for child_link in link.links %}  
    <li {% if child_link.active %} class="nav-item dropdown {% if child_link.child_active %}dropdown{% endif %}"{% endif %}>
      <a class="dropdown-item" href= "{{ child_link.url }}">{{ child_link.title }}</a>
       
    </li>
    {% endfor %}
  </ul> 
{% endif %} 
</li>
{% endfor %}
</ul>
      
      
    </div>
  </div>
</nav>
 

 
 {% schema %}
{
  "name": "Navigation Bar",
  "settings": [

 {
      "type": "link_list",
      "id": "menu",
      "default": "main-menu",
      "label": "Menu Patel"
    }
   ]
}
{% endschema %}

Leave a Reply

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