Bootstrap 5 Dropdown

Basic Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

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>
</div>

Dropdown Divider

Link 1 Link 2 Link 3
Another link

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

Example

<li><hr class="dropdown-divider"></hr></li>

Dropdown Header

Dropdown header 1
Link 1 Link 2 Link 3
Dropdown header 2
Another link

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

Example

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

Split button

Split button used to split the dropdown

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger 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>