HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

Bootstrap 5 Dropdowns

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list. Dropdown menus are commonly used in website navigation to group related pages in a concise and manageable manner.

Example

 <div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
You can click on above box to edit the code and run again.

Output

Dropdown Divider

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border:

Example

<ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
     <li><a class="dropdown-item" href="#">Link 3</a></li>
     <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Another link</a></li>
    </ul>
You can click on above box to edit the code and run again.

Output

Dropdown Header

The .dropdown-header class is used to add headers inside the dropdown menu:

Example

 <div class="dropdown">
     <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
     </button>
    <ul class="dropdown-menu">
       <li> <h5 class="dropdown-header">Dropdown header 1 </h5> </li>
       <li> <a class="dropdown-item" href="#">Link 1 </a> </li>
       <li> <a class="dropdown-item" href="#">Link 2 </a> </li>
       <li> <a class="dropdown-item" href="#">Link 3 </a> </li>
       <li> <h5 class="dropdown-header">Dropdown header 2 </h5> </li>
       <li> <a class="dropdown-item" href="#">Another link </a> </li>
     </ul>
   </div>
You can click on above box to edit the code and run again.

Output

Disable and Active items

Highlight a specific dropdown item with the .active class (adds a blue background color).

To disable an item in the dropdown menu, use the .disabled class (gets a light-grey text color and a "no-parking-sign" icon on hover):

Example

 <div class="dropdown">
   <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Normal</a></li>
      <li><a class="dropdown-item active" href="#">Active</a></li>
      <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
    </ul>
 </div>
You can click on above box to edit the code and run again.

Output

Dropdown Position

You can also create a "dropend" or "dropstart" menu, by adding the .dropend or .dropstart class to the dropdown element. Note that the caret/arrow is added automatically:

Example

  <div class="dropdown dropstart text-end">
     <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropstart
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Normal </a></li>
       <li> <a class="dropdown-item active" href="#">Active </a></li>
      <li><a class="dropdown-item disabled" href="#">Disabled </a></li>
     </ul>
   </div>   
 <div class="dropdown dropend">
              
                       
<div class="dropdown dropstart text-end">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropstart
  </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Normal</a></li>
      <li><a class="dropdown-item active" href="#">Active</a></li>
      <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
    </ul>
 </div>
You can click on above box to edit the code and run again.

Dropdown Menu Right

To right-align the dropdown menu, add the .dropdown-menu-end class to the element with .dropdown-menu:

Example

 <div class="dropdown dropdown-menu-end">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Wide dropdown button to demonstrate this example
    </button>
  <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
  </div>
You can click on above box to edit the code and run again.

Output

Dropup

If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropdown" to "dropup":

Example

 <div class="dropup">
   <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropup button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
     <li><a class="dropdown-item" href="#">Link 3</a></li>
   </ul>
  </div>
You can click on above box to edit the code and run again.

Output

Dropdown Text

The .dropdown-item-text class is used to add plain text to a dropdown item, or used on links for default link styling.

Example

 <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
 <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
  <li><a class="dropdown-item-text" href="#">Text Link</a></li>
  <li><span class="dropdown-item-text">Just Text</span></li>
</ul>
You can click on above box to edit the code and run again.

Output

Grouped Buttons with a Dropdown

Example

 <div class="btn-group">
   <button type="button" class="btn btn-primary">Apple </button>
   <button type="button" class="btn btn-primary">Samsung </button>
   <div class="btn-group">
     <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony </button>
     <ul class="dropdown-menu">
       <li> <a class="dropdown-item" href="#">Tablet </a> </li>
       <li> <a class="dropdown-item" href="#">Smartphone </a> </li>
     </ul>
  </div>
 </div>
You can click on above box to edit the code and run again.

Output

Vertical Button Group with a Dropdown

Example

 <div class="btn-group-vertical">
 <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
    <ul class="dropdown-menu">
     <li> <a class="dropdown-item" href="#">Tablet</a></li>
      <li><a class="dropdown-item" href="#">Smartphone</a></li>
    </ul>
  </div>
</div>
You can click on above box to edit the code and run again.

Output

Vertical Button Group with Dropdown