## Documentation

Browse source code

##### On this page

- 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

## 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.

## 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.

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

## Dropdown divider

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>

## Dropdown header

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>

## Dropdown with icons

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="#">
        <!-- SVG icon code -->
        Action
      </a>
      <a class="dropdown-item" href="#">
        <!-- SVG icon code -->
        Another action
      </a>
    </div>

## Dropdown with arrow

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>

## Dropdown with badge

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 ml-auto">12</span>
      </a>
      <a class="dropdown-item" href="#">
        Another action
        <span class="badge bg-green ml-auto"></span>
      </a>
    </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.

    <div class="dropdown-menu dropdown-menu-demo">
      <label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="checkbox"> Option 1</label>
      <label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="checkbox"> Option 2</label>
      <label class="dropdown-item"><input class="form-check-input m-0 mr-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 mr-2" type="radio"> Option 1</label>
      <label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio"> Option 2</label>
      <label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio"> Option 3</label>
    </div>

## Dark dropdown

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="#">
        <!-- SVG icon code -->
        Action
      </a>
      <a class="dropdown-item" href="#">
        <!-- SVG icon code -->
        Another action
      </a>
    </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.

    <a href="#" class="btn btn-secondary">
      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-5 mt-auto">
              <span class="avatar avatar-md" style="background-image: url(...)"></span>
              <div class="ml-3">
                <a href="#" class="text-body">Maryjo Lebarree</a>
                <small class="d-block text-muted">3 days ago</small>
              </div>
              <div class="ml-auto">
                <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
                  <!-- SVG icon code -->
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>