Skip to component content

Dropdown Menu

Collect contextual actions in one compact surface using Bootstrap's native dropdown behavior and placement.

Usage

Use .dropdown-menu for contextual actions, filters, or compact choices that should open from a visible trigger. Wrap the trigger and menu in a Bootstrap .dropdown container, prefer a button trigger for in-page actions, and use data-bs-toggle="dropdown" so Bootstrap owns opening, placement, and keyboard behavior.

Render actions as .dropdown-item rows, split groups with .dropdown-header or .dropdown-divider, and place destructive actions after a separator. Keep labels concise, mark disabled items clearly, and use shortcut text only when the same command is actually available from the keyboard.

Dropdowns open on click rather than hover by design and use Popper for dynamic positioning outside navbars. Choose alignment, direction, and data-bs-auto-close based on the surrounding workflow, especially when the menu contains checkboxes, radios, or other form controls.

Headers and separators

Use headers for workflow groups, then split dense items with a divider before destructive actions.

Dropdown Menu
  • Project
<div class="dropdown">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,6">Project actions</button>
  <ul class="dropdown-menu dropdown-menu-start">
    <li>
      <h6 class="dropdown-header">Project</h6>
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-folder-open" data-icon="inline-start" aria-hidden="true"></i>
        <span>Open project</span>
        <span class="ms-auto small text-body-secondary">⌘O</span>
      </button>
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
        <span>Rename project</span>
      </button>
    </li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-archive" data-icon="inline-start" aria-hidden="true"></i>
        <span>Archive</span>
      </button>
    </li>
    <li>
      <button class="dropdown-item" type="button" data-variant="destructive">
        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
        <span>Delete</span>
      </button>
    </li>
  </ul>
</div>

Keyboard hints

Expose key equivalents beside actions so power users can run the same flow from keyboard and pointer.

Dropdown Menu 
<div class="dropdown">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,6">Task queue</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
        <span>Mark complete</span>
        <span class="ms-auto small text-body-secondary">⌘D</span>
      </button>
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
        <span>Add note</span>
        <span class="ms-auto small text-body-secondary">⌘N</span>
      </button>
    </li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-users" data-icon="inline-start" aria-hidden="true"></i>
        <span>Assign owner</span>
        <span class="ms-auto small text-body-secondary">⌥⌘O</span>
      </button>
    </li>
    <li>
      <button class="dropdown-item" type="button" disabled>
        <i class="lucide lucide-clock" data-icon="inline-start" aria-hidden="true"></i>
        <span>Waiting on approval</span>
      </button>
    </li>
  </ul>
</div>

Icon-led rows

Leading icons and optional shortcut text keep each command quickly recognizable in compact menus.

Dropdown Menu 
<div class="dropdown">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,6">Workspace commands</button>
  <ul class="dropdown-menu">
    <li>
      <button class="dropdown-item" type="button">
        <span class="dropdown-item__icon-box">
          <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
        </span>
        <span>Duplicate</span>
        <span class="ms-auto small text-body-secondary">⇧⌘D</span>
      </button>
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-share" data-icon="inline-start" aria-hidden="true"></i>
        <span>Share</span>
        <span class="ms-auto small text-body-secondary">⌘⇧S</span>
      </button>
    </li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-layout-dashboard" data-icon="inline-start" aria-hidden="true"></i>
        <span>New tab</span>
        <span class="ms-auto small text-body-secondary">⌘T</span>
      </button>
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-plus" data-icon="inline-start" aria-hidden="true"></i>
        <span>Invite team</span>
        <span class="ms-auto small text-body-secondary">⌘I</span>
      </button>
    </li>
  </ul>
</div>

Checkbox-like actions

Stateful controls can live inside a dropdown for temporary view filters without leaving the current context.

Dropdown Menu 
<div class="dropdown">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,6" data-bs-auto-close="outside">View options</button>
  <ul class="dropdown-menu">
    <li class="px-3 py-1 text-nowrap">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="dropdown-closed-projects" checked>
        <label class="form-check-label" for="dropdown-closed-projects">Show closed projects</label>
      </div>
    </li>
    <li class="px-3 py-1 text-nowrap">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="dropdown-notify-team">
        <label class="form-check-label" for="dropdown-notify-team">Notify teammates on updates</label>
      </div>
    </li>
    <li class="px-3 py-1 text-nowrap">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="dropdown-confidential" disabled>
        <label class="form-check-label" for="dropdown-confidential">Allow confidential exports</label>
      </div>
    </li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-undo" data-icon="inline-start" aria-hidden="true"></i>
        <span>Reset view</span>
      </button>
    </li>
  </ul>
</div>

Radio-like choices

Use exclusive choices inside a small open context when one sort mode must be selected before returning to the page.

Dropdown Menu
  • Sort by 
<div class="dropdown">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,6" data-bs-auto-close="outside">Sort</button>
  <ul class="dropdown-menu">
    <li class="px-3 py-1">
      <fieldset class="radio-group">
        <legend class="form-label">Sort by</legend>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="dropdown-sort" id="dropdown-sort-recent" checked>
          <label class="form-check-label" for="dropdown-sort-recent">Most recent</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="dropdown-sort" id="dropdown-sort-name">
          <label class="form-check-label" for="dropdown-sort-name">Name</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="dropdown-sort" id="dropdown-sort-urgency">
          <label class="form-check-label" for="dropdown-sort-urgency">Urgency</label>
        </div>
      </fieldset>
    </li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-redo" data-icon="inline-start" aria-hidden="true"></i>
        <span>Reverse order</span>
        <span class="ms-auto small text-body-secondary">⇧⌘R</span>
      </button>
    </li>
  </ul>
</div>

Destructive entry

Keep irreversible actions distinct and use a separate section or separator to reduce mis-clicks.

Dropdown Menu 
<div class="dropdown">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,6">Danger zone</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-clock" data-icon="inline-start" aria-hidden="true"></i>
        <span>Pause publishing</span>
      </button>
    </li>
    <li>
      <button class="dropdown-item" type="button">
        <i class="lucide lucide-users" data-icon="inline-start" aria-hidden="true"></i>
        <span>Transfer ownership</span>
      </button>
    </li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li>
      <button class="dropdown-item" type="button" data-variant="destructive">
        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
        <span>Delete project</span>
        <span class="ms-auto small text-body-secondary">⌘⌫</span>
      </button>
    </li>
  </ul>
</div>

RTL

Compare Arabic and Hebrew RTL menu flows with English as the LTR comparison, using the same trigger, icons, shortcuts, divider, and destructive action.

Status
Accepted
Runtime
Bootstrap plugin
Markup
Bootstrap/native HTML
Reference

For plugin behavior, alignment, and placement options, see the Bootstrap Dropdown documentation.

Known limitation
Bootstrap has no native submenu in dropdowns, so this catalog keeps nested workflows as separate top-level commands to preserve keyboard behavior and predictable focus.
Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.