Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Front dropdown plugin.

Bootstrap Dropdowns documentation

Single button

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

And with <a> elements:

The best part is you can do this with any button variant, too:

Even with ghost buttons.

Animation

Juice up Bootstrap's default dropdowns with animation by adding data-bs-dropdown-animation next to data-bs-toggle="dropdown"

Use data-bs-open-on-hover to animate on hover.

Sizing

Button dropdowns work with buttons of all sizes.

With icon

Use .dropdown-item-icon for icons.

Dropup

Trigger dropdown menus above elements by adding .dropup to the parent element.

Dropright

Trigger dropdown menus at the right of the elements by adding .dropright to the parent element.

Dropleft

Trigger dropdown menus at the left of the elements by adding .dropleft to the parent element.

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

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.

To align end the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl}-end.

To align start the dropdown menu with the given breakpoint or larger, add .dropdown-menu-right and .dropdown-menu{-sm|-md|-lg|-xl}-start.

Turns the default Bootstrap dropdown menu into a fully functional .card component. Utilize any available card options.

Use data-bs-offset or data-bs-reference to change the location of the dropdown.

Methods

Parameters Description
data-bs-dropdown-animation Adds animation to the dropdown menu
data-bs-open-on-hover Adds animation to the dropdown menu on hover