Dropdowns

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

Dropdown link Example

         <div class="dropdown">
         <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
         Dropdown link
         </a>
         <ul class="dropdown-menu dropdown-menu-sm"  aria-labelledby="dropdownMenuLink">
         <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>

Split button

         <div class="btn-group">
         <button type="button" class="btn btn-primary">Action</button>
         <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
         <span class="visually-hidden">Toggle Dropdown</span>
         </button>
         <ul class="dropdown-menu dropdown-menu-sm">
         <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>

Dropright

         <!-- Default dropend button -->
         <div class="btn-group dropend me-5 mb-4">
         <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
         Dropright
         </button>
         <ul class="dropdown-menu dropdown-menu-sm">
         <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>
         <!-- Split dropright button -->
         <div class="btn-group dropend me-5 mb-4">
         <button type="button" class="btn btn-primary ">
         Split dropend
         </button>
         <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
         <span class="visually-hidden">Toggle Dropright</span>
         </button>
         <ul class="dropdown-menu dropdown-menu-sm">
         <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>

Dropup

         <!-- Default dropup button -->
         <div class="btn-group dropup me-5 mb-4">
         <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
         Dropup
         </button>
         <ul class="dropdown-menu dropdown-menu-sm">
         <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>
         <!-- Split dropup button -->
         <div class="btn-group dropup me-5 mb-4">
         <button type="button" class="btn btn-primary ">
         Split dropup
         </button>
         <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
         <span class="visually-hidden">Toggle Dropdown</span>
         </button>
         <ul class="dropdown-menu dropdown-menu-sm">
         <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>

Sizing

         <!-- Large button groups (default and split) -->
         <div class="btn-group me-5 mb-4">
         <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
         Large button
         </button>
         <ul class="dropdown-menu dropdown-menu-sm">
         <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>
         <!-- Large split button -->
         <div class="btn-group me-5 mb-4">
         <button type="button" class="btn btn-primary btn-lg">
         Large split button
         </button>
         <button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
         <span class="visually-hidden">Toggle Dropdown</span>
         </button>
         <ul class="dropdown-menu dropdown-menu-sm">
         <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>