Dropdowns

Basic Dropdown

<div class="dropdown">
  <button class="btn bg-gradient-primary dropdown-toggle" type="button" id="dropdownBasic" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownBasic">
    <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</a></li>
  </ul>
</div>

Color Variants

<div class="dropdown">
  <button class="btn bg-gradient-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

<div class="dropdown">
  <button class="btn bg-gradient-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
  <ul class="dropdown-menu">...</ul>
</div>

<div class="dropdown">
  <button class="btn bg-gradient-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
  <ul class="dropdown-menu">...</ul>
</div>

Split Button

A split button separates the main action from the dropdown toggle:

<div class="btn-group">
  <button type="button" class="btn bg-gradient-primary">Save</button>
  <button type="button" class="btn bg-gradient-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Save as draft</a></li>
    <li><a class="dropdown-item" href="#">Save and publish</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Discard changes</a></li>
  </ul>
</div>

<div class="dropdown">
  <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    <i class="ni ni-settings-gear-65 me-1" aria-hidden="true"></i> Options
  </button>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Actions</h6></li>
    <li><a class="dropdown-item" href="#">Edit</a></li>
    <li><a class="dropdown-item" href="#">Duplicate</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><h6 class="dropdown-header">Danger zone</h6></li>
    <li><a class="dropdown-item text-danger" href="#">Delete</a></li>
  </ul>
</div>

<!-- Dropup -->
<div class="btn-group dropup">
  <button class="btn bg-gradient-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropup</button>
  <ul class="dropdown-menu">...</ul>
</div>

<!-- Dropend (right) -->
<div class="btn-group dropend">
  <button class="btn bg-gradient-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropend</button>
  <ul class="dropdown-menu">...</ul>
</div>

<!-- Dropstart (left) -->
<div class="btn-group dropstart">
  <button class="btn bg-gradient-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropstart</button>
  <ul class="dropdown-menu">...</ul>
</div>

<div class="dropdown">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

Sizes

<button class="btn btn-lg bg-gradient-primary dropdown-toggle" data-bs-toggle="dropdown">Large</button>
<button class="btn bg-gradient-primary dropdown-toggle" data-bs-toggle="dropdown">Default</button>
<button class="btn btn-sm bg-gradient-primary dropdown-toggle" data-bs-toggle="dropdown">Small</button>

Active and Disabled Items

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular item</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active item</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled item</a></li>
</ul>

Usage Guidelines

  • Always include aria-expanded on the toggle button
  • Use aria-labelledby on the menu to connect it to its trigger
  • Add visually-hidden text to split button toggles for screen readers
  • Use dropdown-divider to group related actions
  • Use dropdown-header for section labels within long menus
  • Add text-danger class to destructive actions
  • Use disabled class and aria-disabled="true" for unavailable items
  • Prefer bg-gradient-* button classes for primary dropdown triggers
  • Use btn-outline-* for secondary/toolbar dropdowns
On this page