How to add dropdown navigation bar 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 %}