drop down nav with listing sub menus

    0

    0

    The code will create a navbar with an expand/collapse effect. When the user clicks on the toggler, the navbar will collapse to show the submenu items. When the user clicks on one of the submenu items, the submenu will expand and show the associated items.

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main_nav">
      <ul class="navbar-nav">
        <li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
        <li class="nav-item"><a class="nav-link" href="#"> About </a></li>
        <li class="nav-item dropdown" id="myDropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">  Treeview menu  </a>
          <ul class="dropdown-menu">
            <li> <a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
            <li> <a class="dropdown-item" href="#"> Dropdown item 2 &raquo; </a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Submenu item 1</a></li>
                <li><a class="dropdown-item" href="#">Submenu item 2</a></li>
                <li><a class="dropdown-item" href="#">Submenu item 3 &raquo; </a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="#">Multi level 1</a></li>
                    <li><a class="dropdown-item" href="#">Multi level 2</a></li>
                  </ul>
                </li>
                <li><a class="dropdown-item" href="#">Submenu item 4</a></li>
                <li><a class="dropdown-item" href="#">Submenu item 5</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item" href="#"> Dropdown item 3 </a></li>
            <li><a class="dropdown-item" href="#"> Dropdown item 4 </a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- navbar-collapse.// -->
    </div>
    <!-- container-fluid.// -->
    </nav>
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.