## Documentation

# 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="#">
        <!-- 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>

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

## 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="#">
        <!-- 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>

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