Dropdown Variation
Trigger dropdown menus below elements. This is default option.
Dropup Variation
Trigger dropdown menus above elements by adding .dropup to the parent element.
Dropright Variation
Trigger dropdown menus at the right of the elements by adding .dropright to the parent element.
Dropleft Variation
Trigger dropdown menus at the left of the elements by adding .dropleft to the parent element.
Dropdown Active states
Dropdown Buttons with .active class and theme color buttons.
Active states
Dropdowns Sizes
Large Size
Use.btn-lg class to set large size dropdown.
Default Size
Default size dropdown.
Small Size
Use .btn-sm class to set small size dropdown.
Dropdowns Options
Data Offset
Use data-offset to change the location of the dropdown.
Data Reference
Use data-reference to change the location of the dropdown.
Menu right alignment
Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
Dropdown Menu content
Basic Header
Add a header to label sections of actions in any dropdown menu.
Dividers
Separate groups of related menu items with a divider.
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.
