Dropdown
Basic examples
Basic dropdown can be used with either single button or split button.
Trigger using non-button elements
Dropdown can also be used with <a>
, <span>
or
any other tags.
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Directions
Use dropdown modifier classes to alter the alignment of the dropdowns.
Menu items
You can use <a>
or <button>
elements as dropdown
items.
Non-interactive dropdown item
Active item
Disabled item
Menu alignment
By default, a dropdown menu is automatically positioned 100% from the top and along
the left side of its parent. You can change this with the directional
.drop*
classes, but you can also control them with additional modifier
classes.
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.
Menu content
Headers
Add a header to label sections of actions in any dropdown menu.
Dividers
Separate groups of related menu items with a divider.
Text
Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.
Dropdown options
Use data-bs-offset
or data-bs-reference
to change the
location of the dropdown.
Auto close behavior
By default, the dropdown menu is closed when clicking inside or outside the dropdown
menu. You can use the
autoClose
option to change this behavior of the dropdown.