bootstrap_ref_comp_dropdowns

Bootstrap Dropdown Components

Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are made interactive with the Bootstrap dropdown JavaScript plugin (or data attributes). In Bootstrap 5, use data-bs-toggle="dropdown" to activate them.

For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial.

Class
Description
Example (Conceptual - Refer to full Dropdowns tutorial for code)


.dropdown
Indicates a dropdown menu container.
Try it


.dropdown-menu
Builds the actual dropdown menu list.
Try it


.dropdown-menu-end
Right-aligns a dropdown menu relative to its trigger. (Replaces `.dropdown-menu-right`)
Try it


.dropdown-menu-start
Left-aligns a dropdown menu relative to its trigger (default behavior, but can be explicit).
Try it


.dropdown-header
Adds a header text inside the dropdown menu.
Try it


.dropup
Indicates a dropup menu, opening upwards.
Try it


.dropend
Indicates a dropdown menu that opens to the right of the trigger.
Try it


.dropstart
Indicates a dropdown menu that opens to the left of the trigger.
Try it


.dropdown-item.disabled, a.dropdown-item.disabled
Disables an item in the dropdown menu. Use `aria-disabled="true"` for accessibility.
Try it


.dropdown-divider
Separates groups of related menu items with a horizontal line. (Replaces `.divider`)
Try it


.dropdown-item-text
For adding plain text to a dropdown, not interactive.
Try it

Note: Bootstrap 5 prefers data-bs-* attributes, so data-toggle="dropdown" becomes data-bs-toggle="dropdown".