Dropdown

A dropdown is a menu that opens from a button or a link and holds options or actions, so the toolbar stays short.

Any .btn becomes a dropdown toggle with data-bs-toggle="dropdown" and a .dropdown-menu next to it. The classes below add dividers, headers, icons and other details to the menu.

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

A .dropdown-divider separates groups of items.

<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

The active class marks the current item.

<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

The disabled class shows an item that isn't available right now.

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

A .dropdown-header names a group of items.

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

An icon in front of each item makes the options faster to scan.

<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 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 d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
      </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 d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4" />
        <path d="M13.5 6.5l4 4" />
      </svg> Another action
    </a>
  </div>
</div>

Add an arrow that points at the dropdown button.

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

A badge in an item shows a count or a status next to it.

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

Items can hold checkboxes, which makes a dropdown work as a filter.

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

Add dropdown-menu-dark to the menu for a dark menu on a light page.

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

A menu can hold card content, such as a short profile or a summary, when a plain list isn't enough.

<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: 16rem">
    <div class="card d-flex flex-column">
      <a href="#">
        <img class="card-img-top" src="/static/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.</div>
        <div class="d-flex align-items-center pt-4 mt-auto">
          <span class="avatar" style="background-image: url(/static/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>

A long menu can be split into columns instead of scrolling. Wrap the items in dropdown-menu-columns, then group them into dropdown-menu-column elements - one per column.

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Components</button>
  <div class="dropdown-menu">
    <div class="dropdown-menu-columns">
      <div class="dropdown-menu-column">
        <a class="dropdown-item" href="#">Accordion</a>
        <a class="dropdown-item" href="#">Alert</a>
        <a class="dropdown-item" href="#">Avatar</a>
      </div>
      <div class="dropdown-menu-column">
        <a class="dropdown-item" href="#">Badge</a>
        <a class="dropdown-item" href="#">Button</a>
        <a class="dropdown-item" href="#">Card</a>
      </div>
    </div>
  </div>
</div>

Submenu

Nest a dropdown inside a menu item and add dropend to open the child menu to the side instead of below.

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Actions</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Edit</a>
    <div class="dropdown dropend">
      <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Move to</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Inbox</a>
        <a class="dropdown-item" href="#">Archive</a>
      </div>
    </div>
    <a class="dropdown-item" href="#">Delete</a>
  </div>
</div>

JavaScript

Tabler automatically initializes all elements with data-bs-toggle="dropdown" on page load. This is the code that runs:

const dropdownTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="dropdown"]'))
dropdownTriggerList.map(function (dropdownTriggerEl: HTMLElement) {
  const options = {
    boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.documentElement : 'clippingParents',
  }
  return new Dropdown(dropdownTriggerEl, options)
})

Accessibility

The trigger must be a button, or an a with an href. Bootstrap toggles aria-expanded on it for you, so do not set it by hand.
Bootstrap moves focus into the menu and supports the arrow keys, Home, End and Escape. That only works while the items are .dropdown-item elements inside .dropdown-menu.
An icon-only trigger needs an aria-label. The caret is decorative and carries no name.
A dropdown used as a menu of actions should hold button items; one used for navigation should hold links. Mixing them makes the keyboard behavior inconsistent.
Use .dropdown-header for a group title and .dropdown-divider for a separator, rather than styling a plain item to look like one.

SCSS variables

Use these SCSS variables to customize dropdowns. The default values are:

$dropdown-min-width: 11rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: 0.25rem;
$dropdown-spacer: 1px;
$dropdown-font-size: $font-size-base;
$dropdown-color: var(--body-color);
$dropdown-bg: var(--bg-surface);
$dropdown-border-color: var(--border-color-translucent);
$dropdown-border-radius: var(--border-radius);
$dropdown-border-width: var(--border-width);
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}); // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: var(--spacer-2);
$dropdown-box-shadow: var(--shadow-dropdown);

$dropdown-link-color: inherit;
$dropdown-link-hover-color: inherit;
$dropdown-link-hover-bg: $hover-bg;
$dropdown-link-active-color: var(--primary);
$dropdown-link-active-bg: var(--active-bg);
$dropdown-link-disabled-color: var(--tertiary-color);

$dropdown-item-padding-y: 0.5rem;
$dropdown-item-padding-x: 0.75rem;

$dropdown-header-color: $gray-600;
$dropdown-header-padding-x: $dropdown-item-padding-x;
$dropdown-header-padding-y: $dropdown-padding-y;

$dropdown-max-width: 25rem;
$dropdown-scrollable-height: 13rem;
$dropdown-item-gap: 0.5rem;
$dropdown-header-padding-bottom: 0.25rem;
$dropdown-menu-columns-gap: 0.25rem;
$dropdown-arrow-offset: 0.25rem;
$dropdown-arrow-inset: 0.75rem;
$dropdown-dropend-offset: 0.25rem;
$dropdown-menu-card-min-width: 20rem;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`dropdown`	component	Wrapper around the trigger and the menu
`dropdown-toggle`	part	The trigger; Bootstrap keeps aria-expanded in sync
`dropdown-menu`	part	The menu itself
`dropdown-item`	part	One entry
`dropdown-item-icon`	part	Icon at the start of an entry
`dropdown-item-indicator`	part	Marker slot, for a checkbox or a radio
`dropdown-item-text`	part	Plain text that is not an action
`dropdown-header`	part	Section label between entries
`dropdown-divider`	part	Separator line
`dropdown-menu-columns`	part	Splits a long menu into columns, holding dropdown-menu-column elements
`dropdown-menu-card`	part	Lets the menu hold card content instead of a list
`dropdown-menu-arrow`	style	Adds a pointer towards the trigger
`dropdown-menu-dark`	style	Dark menu
`dropdown-toggle-split`	style	Separates the caret into its own button
`dropdown-menu-scrollable`	behavior	Scrolls a long menu instead of growing it
`dropdown-menu-end`	direction	Aligns the menu to the trailing edge; -{breakpoint}- variants apply above a width
`dropend`	direction	Opens a nested menu to the side, for a submenu

Menu

Dropdown

Active state

Disabled state

Multi-column menu

Submenu

JavaScript

Accessibility

SCSS variables

Class reference

On this page

130 sleek illustrations for your startup's visual identity.

Menu

Dropdown

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?

Multi-column menu

Submenu

JavaScript

Accessibility

SCSS variables

Class reference

Related

On this page

130 sleek illustrations for your startup's visual identity.