Dropdowns

Dropdowns are quite useful in a variety of componets, so there are a lot of options.

Dropdown Classes

dropdown

• dropdown-toggle
• dropdown-menu
  • dropdown-item

Try it

Like many other components, but unlike some of the other components, the triggers are inside the main dropdown component. Because of this, there doesn't need to be a target from the trigger to the dropdown, so the data-bs-toggle attribute just looks for to the dropdown in the same component.

The trigger has a class of dropdown-toggle and can be a link or a button. Again, no need to target anything since the dropdown-menu is in the same container. It has an ID so that it can be identified by the aria-labelledby property in the dropdown-menu.

Finally, the dropdown-menu container has an assistive aria-labelledby pointing to the trigger

Dropdown Group

btn-group

• dropdown-toggle-split

Try it

Instead of using a dropdown container, you can use a button group class btn-group. That allows you to use two buttons and separate the action from the dropdown.

The dropdown toggle can have an option to show up as a split button by adding a dropdown-toggle-split in a btn-group. That gives you two different buttons to handle the selection separately from the action.

Dropdown Options

dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end

dropend dropstart dropup

dropdown-menu-dark

Try it

There's a few classes that modify the way dropdowns work.

If you want to control how the menu aligns with it's container, you can add a responsive class that controls at which breakpoint the menu switches from aligning at the beginning of the element to the end.

Instead of the dropdown class, you can use one of several other directional classes. dropend puts the dropdown after or to the right of the element. dropstart puts it at the beginning and dropup puts it on top.

There is a caveat, popper.js, the library that manages these dropdowns is pretty smart and if the dropdown doesn't fit on the page, it will try to add it in the opposite direction.

dropdown-menu-dark - Gives you a dropdown with a dark background instead of the lighter background.

Dropdown Content

dropdown-header
dropdown-divider
dropdown-item-text

Try it

There are some styles that help you control the content in a dropdown.

dropdown-header - This makes the text have a slightly smaller font size and look different than links.

dropdown-divider - If you need to create a divider you can create an element with a class of dropdown-divider.

dropdown-item-text - You can include an hr with a class of dropdown-divider.