Nested Dropdown

Bootstrap nested (multilevel) Dropdown - examples & tutorial

Examples of nested dropdowns built with the latest Bootstrap 5.

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