Bootstrap 5 Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking.

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>

Try it Yourself

The .dropdown class is applied to a <div> to create the dropdown container.
The dropdown button has the class .btn and .btn-primary, and the data-bs-toggle and data-bs-target attributes are used to toggle the dropdown on button click.
The dropdown menu is created with the .dropdown-menu class.
Inside the dropdown menu, you can include <a> tags with the class .dropdown-item for each option.

Dark dropdowns

Example

<div class="dropdown">
 <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown button
 </button>
 <ul class="dropdown-menu dropdown-menu-dark">
  <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>

Try it Yourself

dropdup

.dropup class tiggers the menus above the elements.

Example

<div class="dropdown dropup">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    -- Dropdown menu links --
  </ul>
</div>

Try it Yourself

dropdend & dropstart

.dropstart class tiggers the menus at the left of the elements.

Example

<!-- dropend -->
<div class="dropdown dropend">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    -- Dropdown menu links 
  </ul>
</div>

<!-- dropstart -->
<div class="dropdown dropstart">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    -- Dropdown menu links 
  </ul>
</div>

Try it Yourself

Active and Disable Menu Items

Add .active to items in the dropdown to highlight with blue colored background.
Add .disabled to items in the dropdown to disable the item.

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="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#">Active link</a></li>
  <li><a class="dropdown-item disabled" href="#">Disabled Link</a></li>
 </ul>
</div>

Try it Yourself

Dropdown Header

The .dropdown-header class is used to style the header text.

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">Heading 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">Heading 2</h5></li>
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
  </ul>
</div>

Try it Yourself

Dropdown Divider

The .dropdown-divider class is used to create a horizontal line that acts as a divider between different sections of items within 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><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>
</div>

Try it Yourself