On this page

Dropdown

Toggle contextual overlays with the Popover API (popover="auto") and CSS Anchor Positioning. The browser handles stacking, light-dismiss, and placement — no Dropdown plugin and no Popper.

Sizes are minified and gzip. A plugin figure includes the Bootstrap runtime that plugin imports. Shipping every plugin is `bootstrap.bundle.min.js` at 23.3 KB gzip, not the sum of these rows.
	What runs it	JavaScript
Bootstrap 5.3	Dropdown plugin, including Popper	13.7 KB gzip
This repo	popover="auto" and CSS Anchor Positioning. No Popper.	0 KB

When that API is missing, this page also loads invoker-commands.js (0.8 KB gzip). See Polyfills.

Markup this component accepts. The full inventory is /components.json.
Optional	`<pe-focus-group>` · `src/behaviors/focus-group.js` . Arrow, Home, and End keys across `.dropdown-item`. Tab works without it.
Avoid	`command` works on `<button>`, not `<a href>`. Sibling `popover="auto"` menus replace each other. Nest the submenu popover (or its invoker) inside the parent popover, or the parent closes. These are generic overlays, not ARIA `role="menu"` widgets. Add that ARIA yourself if you need an application menu.

How it works

command="toggle-popover" and commandfor replace data-bs-toggle="dropdown".
The menu is .dropdown-menu with popover="auto". The browser puts it in the top layer and closes it on outside click or Escape.
CSS Anchor Positioning tethers the menu to .dropdown-toggle (via anchor-name / position-anchor and anchor-scope on the wrapper). .dropup, .dropend, .dropstart, .dropdown-center, and .dropdown-menu-end still choose the side. position-try-fallbacks flips when there isn’t room.
:popover-open replaces .show for the open state.
command works on <button>, not <a href>.
Sibling popover="auto" menus still replace each other. A nested menu must sit inside the open parent popover (or its invoker must) so the ancestor stays open.

Single button

Any single .btn can be turned into a dropdown toggle. command/commandfor opens a popover menu.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="dropdownMenuButton">
    Dropdown button
  </button>
  <ul class="dropdown-menu" popover="auto" id="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Dropdown link

command only works on buttons, so this is a button styled as a .btn rather than an <a href> trigger.

Bootstrap’s plugin also accepts <a href> toggles. Invoker Commands require a <button>.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="dropdownMenuLink">
    Dropdown link
  </button>
  <ul class="dropdown-menu" popover="auto" id="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Button variants

The same markup works with any button variant.

<div class="d-flex flex-wrap gap-2">
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" command="toggle-popover" commandfor="ddVariantprimary">
      Primary
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddVariantprimary">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" command="toggle-popover" commandfor="ddVariantsecondary">
      Secondary
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddVariantsecondary">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" command="toggle-popover" commandfor="ddVariantsuccess">
      Success
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddVariantsuccess">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" command="toggle-popover" commandfor="ddVariantinfo">
      Info
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddVariantinfo">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle" command="toggle-popover" commandfor="ddVariantwarning">
      Warning
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddVariantwarning">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" command="toggle-popover" commandfor="ddVariantdanger">
      Danger
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddVariantdanger">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Split button

Add .dropdown-toggle-split on the caret button for proper spacing. The first button is a separate action; only the caret toggles the menu.

<div class="d-flex flex-wrap gap-2">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddSplitprimary">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddSplitprimary">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddSplitsecondary">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddSplitsecondary">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddSplitsuccess">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddSplitsuccess">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddSplitinfo">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddSplitinfo">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddSplitwarning">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddSplitwarning">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddSplitdanger">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddSplitdanger">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Sizing

Button dropdowns work with .btn-lg and .btn-sm, including split buttons.

<div class="d-flex flex-wrap gap-2 align-items-center">
  <div class="btn-group">
    <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" command="toggle-popover" commandfor="ddLarge">
      Large button
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddLarge">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button class="btn btn-secondary btn-lg" type="button">
      Large split button
    </button>
    <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddLargeSplit">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddLargeSplit">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" command="toggle-popover" commandfor="ddSmall">
      Small button
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddSmall">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button class="btn btn-secondary btn-sm" type="button">
      Small split button
    </button>
    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddSmallSplit">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddSmallSplit">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Dark dropdowns

Opt into darker dropdowns by adding .dropdown-menu-dark onto an existing .dropdown-menu.

Dark variants for components were deprecated in v5.3.0 with color modes. Prefer data-bs-theme="dark" on the component or a parent instead of .dropdown-menu-dark.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="ddDark">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" popover="auto" id="ddDark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Navbar

A dark dropdown inside a navbar. Placement still uses CSS Anchor Positioning — Popper is not involved, including in navbars.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <button class="btn btn-dark dropdown-toggle" type="button" command="toggle-popover" commandfor="ddNavDark">
          Dropdown
        </button>
        <ul class="dropdown-menu dropdown-menu-dark" popover="auto" id="ddNavDark">
          <li><a class="dropdown-item active" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Centered

Make the dropdown menu centered below the toggle with .dropdown-center on the parent.

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="ddCenter">
    Centered dropdown
  </button>
  <ul class="dropdown-menu" popover="auto" id="ddCenter">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup

Trigger dropdown menus above elements by adding .dropup to the parent.

<div class="d-flex flex-wrap gap-2">
  <div class="btn-group dropup">
    <button type="button" class="btn btn-secondary dropdown-toggle" command="toggle-popover" commandfor="ddDropup">
      Dropup
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddDropup">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group dropup">
    <button type="button" class="btn btn-secondary">
      Split dropup
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddDropupSplit">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddDropupSplit">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Dropup centered

Make the dropup menu centered above the toggle with .dropup-center and .dropup on the parent.

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="ddDropupCenter">
    Centered dropup
  </button>
  <ul class="dropdown-menu" popover="auto" id="ddDropupCenter">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Trigger dropdown menus at the right of the elements by adding .dropend to the parent.

<div class="d-flex flex-wrap gap-2">
  <div class="btn-group dropend">
    <button type="button" class="btn btn-secondary dropdown-toggle" command="toggle-popover" commandfor="ddDropend">
      Dropend
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddDropend">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group dropend">
    <button type="button" class="btn btn-secondary">
      Split dropend
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddDropendSplit">
      <span class="visually-hidden">Toggle Dropend</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddDropendSplit">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Dropstart

Trigger dropdown menus at the left of the elements by adding .dropstart to the parent. Directions are flipped in RTL.

<div class="d-flex flex-wrap gap-2 justify-content-end">
  <div class="btn-group dropstart">
    <button type="button" class="btn btn-secondary dropdown-toggle" command="toggle-popover" commandfor="ddDropstart">
      Dropstart
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddDropstart">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group dropstart">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddDropstartSplit">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <button type="button" class="btn btn-secondary">
      Split dropstart
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddDropstartSplit">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Submenu

Put .dropdown-submenu on the list item and nest another popover menu inside the parent menu. Bootstrap 5 dropped this because Popper could not keep the ancestor open. Nested popover="auto" can. Add .dropstart on the submenu to open the other way. position-try-fallbacks flips when there is no room.

The nested <ul popover="auto"> has to be a descendant of the open parent popover. A sibling menu would close the parent. The toggle is a <button class="dropdown-item dropdown-toggle">, not an <a href>.

<div class="d-flex flex-wrap gap-2">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="ddSubmenu">
      Dropdown
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddSubmenu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li class="dropdown-submenu">
        <button class="dropdown-item dropdown-toggle" type="button" command="toggle-popover" commandfor="ddSubmenuMore">
          More options
        </button>
        <ul class="dropdown-menu" popover="auto" id="ddSubmenuMore">
          <li><a class="dropdown-item" href="#">Nested action</a></li>
          <li><a class="dropdown-item" href="#">Another nested action</a></li>
          <li class="dropdown-submenu">
            <button class="dropdown-item dropdown-toggle" type="button" command="toggle-popover" commandfor="ddSubmenuDeep">
              Even more
            </button>
            <ul class="dropdown-menu" popover="auto" id="ddSubmenuDeep">
              <li><a class="dropdown-item" href="#">Third level</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="ddSubmenuStart">
      Dropstart submenu
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddSubmenuStart">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li class="dropdown-submenu dropstart">
        <button class="dropdown-item dropdown-toggle" type="button" command="toggle-popover" commandfor="ddSubmenuStartMore">
          More options
        </button>
        <ul class="dropdown-menu" popover="auto" id="ddSubmenuStartMore">
          <li><a class="dropdown-item" href="#">Nested action</a></li>
          <li><a class="dropdown-item" href="#">Another nested action</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Menu items

You can use <a> or <button> elements as dropdown items.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="ddMenuItems">
    Dropdown
  </button>
  <ul class="dropdown-menu" popover="auto" id="ddMenuItems">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Text items

Create non-interactive dropdown items with .dropdown-item-text.

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Active

Add .active to items in the dropdown to style them as active. Use aria-current for assistive technologies.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Disabled

Add .disabled to items in the dropdown to style them as disabled.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Menu alignment

Add .dropdown-menu-end to right-align the menu with the toggle. Directions are mirrored in RTL.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" command="toggle-popover" commandfor="ddAlignEnd">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end" popover="auto" id="ddAlignEnd">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Responsive alignment

Use .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end to right-align from a breakpoint up, or combine .dropdown-menu-end with .dropdown-menu-*-start to switch back.

Bootstrap required data-bs-display="static" so Popper would not override these classes. CSS Anchor Positioning honors the alignment classes directly, so that attribute is not needed.

<div class="d-flex flex-wrap gap-2">
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" command="toggle-popover" commandfor="ddAlignLgEnd">
      Left-aligned, right-aligned lg
    </button>
    <ul class="dropdown-menu dropdown-menu-lg-end" popover="auto" id="ddAlignLgEnd">
      <li><button class="dropdown-item" type="button">Action</button></li>
      <li><button class="dropdown-item" type="button">Another action</button></li>
      <li><button class="dropdown-item" type="button">Something else here</button></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" command="toggle-popover" commandfor="ddAlignLgStart">
      Right-aligned, left-aligned lg
    </button>
    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start" popover="auto" id="ddAlignLgStart">
      <li><button class="dropdown-item" type="button">Action</button></li>
      <li><button class="dropdown-item" type="button">Another action</button></li>
      <li><button class="dropdown-item" type="button">Something else here</button></li>
    </ul>
  </div>
</div>

Headers

Add a header to label sections of actions in any dropdown menu.

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Dividers

Separate groups of related menu items with a divider.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Text

Place any freeform text within a dropdown menu with text and use spacing utilities.

<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
  <p>
    Some example text that’s free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

Dropdown options

data-bs-offset and data-bs-reference are Popper options and have no native equivalent. The menus still open as popovers.

data-bs-offset and data-bs-reference="parent" require Popper. Native menus always anchor to .dropdown-toggle. Extra offset can be approximated with margin on the menu if needed.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" command="toggle-popover" commandfor="ddOffset">
      Offset
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddOffset">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" command="toggle-popover" commandfor="ddReference">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddReference">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Auto close behavior

popover="auto" light-dismisses on outside click (and Escape). popover="manual" stays open until the toggle (or hide-popover) runs. Item clicks only close the menu when those items use command="hide-popover".

Bootstrap’s autoClose option is JavaScript. Closest native mapping: default and “clickable outside” use popover="auto"; “clickable inside” and “manual close” use popover="manual". Default and inside also put command="hide-popover" on items so a click inside can close the menu. Clicking another auto popover will not dismiss a manual one.

<div class="d-flex flex-wrap gap-2">
  <div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="ddAutoDefault">
      Default dropdown
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddAutoDefault">
      <li><button class="dropdown-item" type="button" command="hide-popover" commandfor="ddAutoDefault">Menu item</button></li>
      <li><button class="dropdown-item" type="button" command="hide-popover" commandfor="ddAutoDefault">Menu item</button></li>
      <li><button class="dropdown-item" type="button" command="hide-popover" commandfor="ddAutoDefault">Menu item</button></li>
    </ul>
  </div>
  <div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="ddAutoInside">
      Clickable inside
    </button>
    <ul class="dropdown-menu" popover="manual" id="ddAutoInside">
      <li><button class="dropdown-item" type="button" command="hide-popover" commandfor="ddAutoInside">Menu item</button></li>
      <li><button class="dropdown-item" type="button" command="hide-popover" commandfor="ddAutoInside">Menu item</button></li>
      <li><button class="dropdown-item" type="button" command="hide-popover" commandfor="ddAutoInside">Menu item</button></li>
    </ul>
  </div>
  <div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="ddAutoOutside">
      Clickable outside
    </button>
    <ul class="dropdown-menu" popover="auto" id="ddAutoOutside">
      <li><a class="dropdown-item" href="#">Menu item</a></li>
      <li><a class="dropdown-item" href="#">Menu item</a></li>
      <li><a class="dropdown-item" href="#">Menu item</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="ddAutoManual">
      Manual close
    </button>
    <ul class="dropdown-menu" popover="manual" id="ddAutoManual">
      <li><a class="dropdown-item" href="#">Menu item</a></li>
      <li><a class="dropdown-item" href="#">Menu item</a></li>
      <li><a class="dropdown-item" href="#">Menu item</a></li>
    </ul>
  </div>
</div>

Accessibility

Bootstrap’s dropdowns are generic overlays, not ARIA role="menu" widgets. The same applies here: add more specific ARIA yourself if you need an application menu.

Native popovers close with Escape and move to the top layer. Invoker Commands keep aria-expanded in sync on the toggle. They do not move through .dropdown-item with arrow keys. Tab through items, or wrap the dropdown in optional <pe-focus-group>.

A .dropdown-submenu toggle is a button with .dropdown-item. Nested popover="auto" keeps the ancestor open; Escape closes the topmost menu first.

Browser support

Three columns, not one baseline. The same row is on the overview.
No script	Polyfill	No fallback
`popover="auto"`: Chrome 114+, Firefox 125+, Safari 17+.	`command` on the toggle, the same polyfill as the modal.	CSS Anchor Positioning: Chrome 125+, Safari 26+, Firefox 147+. Without it the menu is not attached to the button. There is no Popper fallback.

Arrow keys

Tab still moves through .dropdown-item when no extra script is loaded. Arrow keys, Home, and End are optional. Wrap the whole .dropdown in <pe-focus-group> and load src/behaviors/focus-group.js. Without that module the element is only a wrapper: the menu still opens, and Tab still reaches every item.

Up and Left focus the previous item. Down and Right focus the next. Home and End jump to the ends. From the toggle, the same keys open the popover and then move. Disabled items are skipped. items is the selector for what can be focused. In a navbar the wrapper goes inside the <li>, because a list may only contain list items. A closed submenu is skipped; once it is open its items are in the same group.

Focus group

pe-focus-group adds arrow keys, Home, and End. The disabled item is skipped. Escape still closes the popover.

<script type="module" src="./node_modules/bootstrap-html/src/behaviors/focus-group.js"></script>

<pe-focus-group items=".dropdown-item:not(.disabled, [aria-disabled='true'])">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" command="toggle-popover" commandfor="dropdownFocusGroup">
      Dropdown with arrow keys
    </button>
    <ul class="dropdown-menu" popover="auto" id="dropdownFocusGroup">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
</pe-focus-group>