Notifications
Dropdowns
Dropdowns
Dark Dropdowns
Single dropdown buttons
Rounded Button Dropdowns
Outline Button Dropdowns
Rounded Outline Dropdowns
Soft Button Dropdowns
Rounded Soft Dropdowns
Split button dropdowns
Dropdown Sizing
Active
Add .active to item in the dropdown to style them as active.
Disabled
Add .disabled to items in the dropdown to style them as disabled.
Dropdown menu centered
Use .dropdown-center on the parent element.
Dropup Centered
Use .dropup-center on the parent element.
Menu Items
You can use <a> or <button> as dropdown items.
Dropdown Options
Use data-bs-offset or data-bs-reference to change the location of the dropdown.
Auto close behavior
You can use the autoClose option to change this behavior of the dropdown.
Alignment Options
Dropdowns with Forms
Put a form within a dropdown menu, or make it into a dropdown menu
Menu Alignment
Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu.
Responsive alignment end
To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.
Responsive alignment left
To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.
Custom Dropdown Arrow
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:
Dropup Variation
Trigger dropdown menus above elements by adding .dropup to the parent element.
Dropstart Variation
Trigger dropdown menus at the right of the elements by adding .dropleft to the parent element.
Headers
Add a header to label sections of actions in any dropdown menu.
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.