Dropdowns

Toggle contextual menus and action lists

Dropdowns reveal a list of actions or links from a toggle button. They support various directions and item types.

A dropdown needs a toggle button with data-bs-toggle="dropdown" and a .dropdown-menu with .dropdown-item links.

<div class="dropdown">
  <button class="btn btn-primary
    dropdown-toggle"
    data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li>
      <a class="dropdown-item"
        href="#">Action</a>
    </li>
    <li>
      <a class="dropdown-item"
        href="#">Another</a>
    </li>
  </ul>
</div>

Click to toggle the dropdown menu

21 / 37