Dropdown
Multi-purpose dropdown component with tons of variations.
Basic
Split Dropdowns
To create a split button add class
.dropdown-toggle-split with your dropdown
toggle class and to add divider between dropdown item
use class
.doprdown-divider
Dropdown with Icons & Emoji
Use .dropdown-item-emoji within
.dropdown-item for font-size and spacing
of emojis.
Directions
Add .dropdown-menu-end to a
.dropdown-menu to right align the
dropdown menu. Trigger dropdown menus at the up /
right / left of the elements by adding
.dropup | .dropright | .dropleft to the
parent element.
Sizes
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Options
Use data-offset or
data-reference attributes to change the
location of the dropdown.
Variations
To create a dropdown with groups you can use
.dropdown-divider.
To create a dropdown with icons use class
.dropdown-icon-wrapper with
.dropdown.
BRUTOPIA