Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin..

Dropdown example

            
              <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-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="#">Something else here</a></li>
                </ul>
              </div>
              <br>
              <!-- Example split success button -->
              <div class="btn-group">
                <button type="button" class="btn btn-success">Action</button>
                <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                  <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                  <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="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
              </div>
              <br><br>
              <div class="dropdown">
                <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown button
                </button>
                <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
                  <li><a class="dropdown-item active" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
              </div>

Dropdown Submenu

This is Dropdown menu with list submenu, this dropdown submenu also supported dropdown reverse.
If used sub dropdown menu, you must add this css .dropdown-submenu in parent submenu and .submenu in next dropdown-menu.

                
                  <!--dropdown submenu-->
                  <li class="nav-item dropdown">
                    <a id="navbarhome" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
                    <!--link-->
                    <ul class="dropdown-menu dropdown-menu-lg-center" aria-labelledby="navbarhome">
                      <!--submenu-->
                      <li class="dropdown-submenu">
                        <a id="sub2" class="dropdown-item dropdown-toggle" href="#">Pages</a>

                        <!--link-->
                        <ul class="submenu dropdown-menu" aria-labelledby="sub2">
                          <li class="dropdown-submenu">
                            <a id="sub350" class="dropdown-item dropdown-toggle" href="#">
                            Basic</a>
                            <!--child submenu-->
                            <ul class="submenu dropdown-menu" aria-labelledby="sub350">
                              <li><a class="dropdown-item" href="#">404</a></li>
                              <li><a class="dropdown-item" href="#">Classic</a></li>
                              <li><a class="dropdown-item" href="#">Coming Soon</a></li>
                              <li><a class="dropdown-item" href="#">FAQ</a></li>
                              <li><a class="dropdown-item" href="#">Term of Use</a></li>
                            </ul>
                            <!--End child submenu-->
                          </li>
                          <li><a class="dropdown-item" href="#">About</a></li>
                          <li><a class="dropdown-item" href="#">Career</a></li>
                          <li><a class="dropdown-item" href="#">Contact</a></li>
                          <li><a class="dropdown-item" href="#">Portfolio</a></li>
                          <li><a class="dropdown-item" href="#">Pricing</a></li>
                          <li><a class="dropdown-item" href="#">Services</a></li>
                        </ul>
                      </li>
                      <!--end submenu-->
                      <!--submenu-->
                      <li class="dropdown-submenu">
                        <a id="sub22" class="dropdown-item dropdown-toggle" href="#">Blogs</a>

                        <!--link-->
                        <ul class="submenu dropdown-menu" aria-labelledby="sub22">
                          <li><a class="dropdown-item" href="#">Blog</a></li>
                          <li><a class="dropdown-item" href="#">Search</a></li>
                          <li><a class="dropdown-item" href="#">Author</a></li>
                          <li><a class="dropdown-item" href="#">Single Article</a></li>
                          <li><a class="dropdown-item" href="#">Classic Article</a></li>
                        </ul>
                      </li>
                      <!--end submenu-->
                      <!--submenu-->
                      <li class="dropdown-submenu">
                        <a id="sub221" class="dropdown-item dropdown-toggle" href="#">Users</a>

                        <!--link-->
                        <ul class="submenu dropdown-menu" aria-labelledby="sub221">
                          <li><a class="dropdown-item" href="#">Login</a></li>
                          <li><a class="dropdown-item" href="#">Register</a></li>
                          <li><a class="dropdown-item" href="#">Recover</a></li>
                        </ul>
                      </li>
                      <!--end submenu-->
                    </ul>
                    <!-- end link -->
                  </li>