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 %}