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

• Non-interactive dropdown item
• Action
• Another action
• Something else here

Active item

• Regular link
• Active link
• Another link

Disabled item

• Regular link
• Disabled link
• Another link

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.

• Dropdown header

• Action
• Another action

Dividers

Separate groups of related menu items with a divider.

• Action
• Another action
• Something else here

• ---

• Separated link

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.