Loading...

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.