Dropdowns
Single dropdown buttons
Rounded Button Dropdowns
Outline Button Dropdowns
Rounded Outline Dropdowns
Split Buttons
Dropdown Sizing
Disabled
Auto close behavior
dropdowns with Forms
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.
Dropdowns options
Use data-bs-offset
or data-bs-reference
to change the location of the dropdown.
Alignment options
Dark Dropdowns
Menu alignment
Responsive alignment end
Responsive alignment left
Custom Dropdown Menu's
Ghost Button Dropdowns
non-interactive dropdown items
Use .dropdown-item-text.
to create non-interactive dropdown items.
Dropdown Headers
Add a .dropdown-header
to label sections of actions in any dropdown menu.
Dropdown Dividers
Dropdown Menu Text