tabler/docs/components/dropdowns.mdx

---
title: Dropdowns
description: 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.
bootstrapLink: components/dropdowns
---

## Default dropdown

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.

```html example code height="20rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Third action</a>
  </div>
</div>
```

## Dropdown divider

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

```html example code height="20rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <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>
</div>
```

## Active state

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

```html example code height="20rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <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>
</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.

```html code example height="20rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <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>
</div>
```

## Dropdown header

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

```html code example height="20rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <span class="dropdown-header">Dropdown header</span>
    <a class="dropdown-item" href="#">
      Action
    </a>
    <a class="dropdown-item" href="#">
      Another action
    </a>
  </div>
</div>
```

## Dropdown with icons

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

```html code example height="20rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <span class="dropdown-header">Dropdown header</span>
    <a class="dropdown-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path>
        <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
      </svg>
      Action
    </a>
    <a class="dropdown-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-pencil" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
        <path d="M13.5 6.5l4 4"></path>
      </svg>
      Another action
    </a>
  </div>
</div>
```

## Dropdown with arrow

Add an arrow that points at the dropdown button.

```html code example height="20rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu dropdown-menu-arrow">
    <a class="dropdown-item" href="#">
      Action
    </a>
    <a class="dropdown-item" href="#">
      Another action
    </a>
  </div>
</div>
```

## Dropdown with badge

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

```html code example height="20rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <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>
</div>
```

## Dropdown with checkboxes

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

```html code example height="20rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
    <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>
</div>
```

## Dark dropdown

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

```html code example height="20rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
    <span class="dropdown-header">Dropdown header</span>
    <a class="dropdown-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
        <circle cx="12" cy="12" r="3" />
      </svg>
      Action
    </a>
    <a class="dropdown-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
        <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
        <path d="M16 5l3 3" />
      </svg>
      Another action
    </a>
  </div>
</div>
```

## Dropdown with card content

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.

```html example height="35rem"
<div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open 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="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" 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-secondary">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(/samples/avatars/013m.jpg)"></span>
          <div class="ms-3">
            <a href="#" class="text-body">Maryjo Lebarree</a>
            <div class="text-secondary">3 days ago</div>
          </div>
          <div class="ms-auto">
            <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```