Nested Dropdown

Bootstrap nested (multilevel) Dropdown - free examples

Nested dropdowns built with Bootstrap 5. Tutorial & templates for multilevel navbar dropdowns menu, activated on hover or on click & much more

By adding a few lines of additional CSS you can add extra levels of submenu to your dropdown. You can apply this to the dropdown in a simple button or within the navbar.

To learn more about dropdowns read Dropdown Docs.


Button dropdown

An example of a nested dropdown with a simple button.

        
            
          <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
              data-mdb-toggle="dropdown" aria-expanded="false">
              Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li>
                <a class="dropdown-item" href="#">Another action</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">
                  Submenu &raquo;
                </a>
                <ul class="dropdown-menu dropdown-submenu">
                  <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="dropdown-menu dropdown-submenu">
                      <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>
            </ul>
          </div>
          
        
    
        
            
          .dropdown-menu li {
          position: relative;
          }
          .dropdown-menu .dropdown-submenu {
          display: none;
          position: absolute;
          left: 100%;
          top: -7px;
          }
          .dropdown-menu .dropdown-submenu-left {
          right: 100%;
          left: auto;
          }
          .dropdown-menu > li:hover > .dropdown-submenu {
          display: block;
          }
          
        
    

Navbar dropdown

An example of nested dropdown within the Navbar.

        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
              <ul class="navbar-nav">
                <!-- Dropdown -->
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                    data-mdb-toggle="dropdown" aria-expanded="false">
                    Dropdown link
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li>
                      <a class="dropdown-item" href="#">Action</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">Another action</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#">
                        Submenu &raquo;
                      </a>
                      <ul class="dropdown-menu dropdown-submenu">
                        <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="dropdown-menu dropdown-submenu">
                            <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>
                  </ul>
                </li>
              </ul>
            </div>
          </nav>
          
        
    
        
            
          .dropdown-menu li {
          position: relative;
          }
          .dropdown-menu .dropdown-submenu {
          display: none;
          position: absolute;
          left: 100%;
          top: -7px;
          }
          .dropdown-menu .dropdown-submenu-left {
          right: 100%;
          left: auto;
          }
          .dropdown-menu > li:hover > .dropdown-submenu {
          display: block;
          }
          
        
    

Navbar dropdown left

An example of a nested dropdown with the submenu expanding on the left side instead of the right side.

        
            
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
              <ul class="navbar-nav ms-auto">
                <!-- Dropdown -->
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLinkRight" role="button"
                    data-mdb-toggle="dropdown" aria-expanded="false">
                    Dropdown link
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkRight">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li>
                      <a class="dropdown-item" href="#"> Submenu &raquo; </a>
                      <ul class="dropdown-menu dropdown-submenu dropdown-submenu-left">
                        <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 4</a>
                        </li>
                        <li>
                          <a class="dropdown-item" href="#">Submenu item 5</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </nav>
          
        
    
        
            
          .dropdown-menu li {
          position: relative;
          }
          .dropdown-menu .dropdown-submenu {
          display: none;
          position: absolute;
          left: 100%;
          top: -7px;
          }
          .dropdown-menu .dropdown-submenu-left {
          right: 100%;
          left: auto;
          }
          .dropdown-menu > li:hover > .dropdown-submenu {
          display: block;
          }
          
        
    

Nested dropdown on hover

An example of a nested dropdown activated on hover, it can also be embedded inside on a Navbar .

        
            
          <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
              data-mdb-toggle="dropdown" aria-expanded="false">
              Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li>
                <a class="dropdown-item" href="#">Another action</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">
                  Submenu &raquo;
                </a>
                <ul class="dropdown-menu dropdown-submenu">
                  <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="dropdown-menu dropdown-submenu">
                      <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>
            </ul>
          </div>
          
        
    
        
            
          .dropdown-menu li {
          position: relative;
          }
          .dropdown-menu .dropdown-submenu {
          display: none;
          position: absolute;
          left: 100%;
          top: -7px;
          }
          .dropdown-menu .dropdown-submenu-left {
          right: 100%;
          left: auto;
          }
          .dropdown-menu > li:hover > .dropdown-submenu {
          display: block;
          }

          .dropdown-hover:hover>.dropdown-menu {
          display: inline-block;
          }

          .dropdown-hover>.dropdown-toggle:active {
          /*Without this, clicking will make it sticky*/
          pointer-events: none;
          }