Dropdowns

Single button

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

Preview
HTML

<!-- Dropdown -->
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

And with <a> elements:

Preview
HTML

<!-- Dropdown -->
<div class="dropdown">
  <a class="btn btn-primary dropdown-toggle" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

The best part is you can do this with any button variant, too:

Preview
HTML

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonPrimary" data-bs-toggle="dropdown" aria-expanded="false">
    Primary
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonPrimary">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-white dropdown-toggle" type="button" id="dropdownMenuButtonWhite" data-bs-toggle="dropdown" aria-expanded="false">
    White
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonWhite">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonSecondary" data-bs-toggle="dropdown" aria-expanded="false">
    Secondary
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSecondary">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButtonSuccess" data-bs-toggle="dropdown" aria-expanded="false">
    Success
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSuccess">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButtonInfo" data-bs-toggle="dropdown" aria-expanded="false">
    Info
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonInfo">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButtonWarning" data-bs-toggle="dropdown" aria-expanded="false">
    Warning
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonWarning">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButtonDanger" data-bs-toggle="dropdown" aria-expanded="false">
    Danger
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonDanger">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
    Dark
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
    Light
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

Even with ghost buttons.

Preview
HTML

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-ghost-primary dropdown-toggle" type="button" id="dropdownMenuButtonGhostPrimary" data-bs-toggle="dropdown" aria-expanded="false">
    Primary
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-ghost-secondary dropdown-toggle" type="button" id="dropdownMenuButtonGhostSecondary" data-bs-toggle="dropdown" aria-expanded="false">
    Secondary
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-ghost-success dropdown-toggle" type="button" id="dropdownMenuButtonGhostSuccess" data-bs-toggle="dropdown" aria-expanded="false">
    Success
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-ghost-info dropdown-toggle" type="button" id="dropdownMenuButtonGhostInfo" data-bs-toggle="dropdown" aria-expanded="false">
    Info
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-ghost-warning dropdown-toggle" type="button" id="dropdownMenuButtonGhostWarning" data-bs-toggle="dropdown" aria-expanded="false">
    Warning
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-ghost-danger dropdown-toggle" type="button" id="dropdownMenuButtonGhostDanger" data-bs-toggle="dropdown" aria-expanded="false">
    Danger
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-ghost-dark dropdown-toggle" type="button" id="dropdownMenuButtonGhostDark" data-bs-toggle="dropdown" aria-expanded="false">
    Dark
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-ghost-light dropdown-toggle" type="button" id="dropdownMenuButtonGhostLight" data-bs-toggle="dropdown" aria-expanded="false">
    Light
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

Animation

Juice up Bootstrap's default dropdowns with animation by adding data-bs-dropdown-animation next to data-bs-toggle="dropdown"

Preview
HTML

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-lg btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonClickAnimation" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
    Click me
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonClickAnimation">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

Use data-bs-open-on-hover to animate on hover.

Preview
HTML

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-lg btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonHoverAnimation" data-bs-toggle="dropdown" aria-expanded="false" data-bs-open-on-hover data-bs-dropdown-animation>
    Hover on me
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonHoverAnimation">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

Sizing

Button dropdowns work with buttons of all sizes.

Preview
HTML

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-lg btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonLg" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonLg">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonDefault" data-bs-toggle="dropdown" aria-expanded="false">
    Default button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonDefault">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

<!-- Dropdown -->
<div class="btn-group">
  <button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonSm" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSm">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<!-- End Dropdown -->

With icon

Use .dropdown-item-icon for icons.

Preview
HTML

<!-- Dropdown -->
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonWithIcon" data-bs-toggle="dropdown" aria-expanded="false">
    With icon
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonWithIcon">
    <a class="dropdown-item" href="#">
      <i class="bi-house dropdown-item-icon"></i> Dashboard
    </a>
    <a class="dropdown-item" href="#">
      <i class="bi-person dropdown-item-icon"></i> Profile
    </a>
    <a class="dropdown-item" href="#">
      <i class="bi-bell dropdown-item-icon"></i> Settings
    </a>
  </div>
</div>
<!-- End Dropdown -->

Dropup

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

Preview
HTML

<!-- Dropup -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
<!-- End Dropup -->

<!-- Split Dropup -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-primary">
    Split dropup
  </button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
<!-- End Split Dropup -->

Dropright

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

Preview
HTML

<!-- Dropright -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
<!-- End Dropright -->

<!-- Split Dropright -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-primary">
    Split dropright
  </button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
<!-- End Split Dropright -->

Dropleft

Trigger dropdown menus at the left of the elements by adding .dropleft to the parent element.

Preview
HTML

<!-- Dropleft -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
<!-- End Dropleft -->

<!-- Split Dropleft -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-primary">
    Split dropleft
  </button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
<!-- End Split Dropleft -->

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

Preview
HTML

<!-- Dropdown -->
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
<!-- End Dropdown -->

Responsive alignment

If you want to use responsive alignment, disable dynamic positioning by adding the data-bs-display="static" attribute and use the responsive variation classes.

To align end the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl}-end.

Preview
HTML

<!-- Dropdown -->
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-end">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
<!-- End Dropdown -->

To align start the dropdown menu with the given breakpoint or larger, add .dropdown-menu-right and .dropdown-menu{-sm|-md|-lg|-xl}-start.

Preview
HTML

<!-- Dropdown -->
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-start">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
<!-- End Dropdown -->

Turns the default Bootstrap dropdown menu into a fully functional .card component. Utilize any available card options.

Preview
HTML

<div class="d-flex">
  <!-- Dropdown -->
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Card dropdown
    </button>
    <div class="dropdown-menu dropdown-card">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <!-- End Dropdown -->
</div>

Use data-bs-offset or data-bs-reference to change the location of the dropdown.

Preview
HTML

<div class="d-flex">
  <!-- Dropdown -->
  <div class="dropdown me-1">
    <button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <!-- End Dropdown -->

  <!-- Dropdown -->
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <!-- End Dropdown -->
</div>

Methods

Parameters	Description
`data-bs-dropdown-animation`	Adds animation to the dropdown menu
`data-bs-open-on-hover`	Adds animation to the dropdown menu on hover