Dropdowns

Bootstrap documentation

Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.

With small markup changes, you can turn any .btn into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.

<div class="dropdown-menu dropdown-menu-demo">
  <a class="dropdown-item" href="#">
    Action
  </a>
  <a class="dropdown-item" href="#">
    Another action
  </a>
</div>

Use dropdown dividers to separate groups of dropdown items for greater clarity.

<div class="dropdown-menu dropdown-menu-demo">
  <a class="dropdown-item" href="#">
    Action
  </a>
  <a class="dropdown-item" href="#">
    Another action
  </a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Active state

Make a dropdown item look active, so that it highlights when a user hovers over a given option.

<div class="dropdown-menu dropdown-menu-demo">
  <a class="dropdown-item" href="#">
    Action
  </a>
  <a class="dropdown-item" href="#">
    Another action
  </a>
  <a class="dropdown-item active" href="#">Active action</a>
</div>

Disabled state

Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.

<div class="dropdown-menu dropdown-menu-demo">
  <a class="dropdown-item" href="#">
    Action
  </a>
  <a class="dropdown-item" href="#">
    Another action
  </a>
  <a class="dropdown-item disabled" href="#">Disabled action</a>
</div>

Add a dropdown header to group dropdown items into sections and name them accordingly.

<div class="dropdown-menu dropdown-menu-demo">
  <span class="dropdown-header">Dropdown header</span>
  <a class="dropdown-item" href="#">
    Action
  </a>
  <a class="dropdown-item" href="#">
    Another action
  </a>
</div>

Use icons in your dropdowns to add more visual content and make the options easy to identify for users.

<div class="dropdown-menu dropdown-menu-demo">
  <span class="dropdown-header">Dropdown header</span>
  <a class="dropdown-item" href="#">
    <!-- Download SVG icon from http://tabler-icons.io/i/settings -->
    <!-- SVG icon code with class="dropdown-item-icon" -->
    Action
  </a>
  <a class="dropdown-item" href="#">
    <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
    <!-- SVG icon code with class="dropdown-item-icon" -->
    Another action
  </a>
</div>

Add an arrow that points at the dropdown button.

<div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow">
  <a class="dropdown-item" href="#">
    Action
  </a>
  <a class="dropdown-item" href="#">
    Another action
  </a>
</div>

Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.

<div class="dropdown-menu dropdown-menu-demo">
  <a class="dropdown-item" href="#">
    Action
    <span class="badge bg-primary ms-auto">12</span>
  </a>
  <a class="dropdown-item" href="#">
    Another action
    <span class="badge bg-green ms-auto"></span>
  </a>
</div>

Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.

<div class="dropdown-menu dropdown-menu-demo">
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Option 1</label>
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Option 2</label>
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Option 3</label>
</div>

<div class="dropdown-menu dropdown-menu-demo">
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Option 1</label>
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Option 2</label>
  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Option 3</label>
</div>

Make your dropdown suit the dark mode of your website or software.

<div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow bg-dark text-white">
  <span class="dropdown-header">Dropdown header</span>
  <a class="dropdown-item" href="#">
    <!-- Download SVG icon from http://tabler-icons.io/i/settings -->
    <!-- SVG icon code with class="dropdown-item-icon" -->
    Action
  </a>
  <a class="dropdown-item" href="#">
    <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
    <!-- SVG icon code with class="dropdown-item-icon" -->
    Another action
  </a>
</div>

Use a dropdown with card content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.

Button

<a href="#" class="btn btn-white">
  Button
</a>
<div class="dropdown">
  <a href="#" class="btn btn-primary dropdown-toggle">Dropdown</a>
  <div class="dropdown-menu dropdown-menu-card" style="max-width: 20rem;">
    <div class="card d-flex flex-column">
      <a href="#">
        <img class="card-img-top" src="..." alt="How do you know she is a witch?">
      </a>
      <div class="card-body d-flex flex-column">
        <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
        <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
        <div class="d-flex align-items-center pt-4 mt-auto">
          <span class="avatar" style="background-image: url(...)"></span>
          <div class="ms-3">
            <a href="#" class="text-body">Maryjo Lebarree</a>
            <div class="text-muted">3 days ago</div>
          </div>
          <div class="ms-auto">
            <a href="#" class="icon d-none d-md-inline-block ms-3 text-muted">
              <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
              <!-- SVG icon code -->
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Documentation

Dropdowns

Default dropdown

Dropdown divider

Active state

Disabled state

Dropdown header

Dropdown with icons

Dropdown with arrow

Dropdown with badge

Dropdown with checkboxes

Dark dropdown

Dropdown with card content

How do you know she is a witch?