Dropdown
Multi-purpose dropdown component with tons of variations.
Basic
Split Dropdowns
To create a split button add class
dropdownDividerButton
with your dropdown toggle class and to add divider between
dropdown item use class
divide-gray-100
Dropdown with Icons & Emoji
Use
dropdownOffsetButton
within
SVG
for font-size and spacing of emojis.
Directions
Add
dropdownOffsetButton
to a
data-dropdown-placement
to right align the dropdown menu. Trigger dropdown menus at
the up / right / left of the elements by adding
top | right | left
to the parent element.
Sizes
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Options
Use
dropdownOffsetButton
or
dropdownDivider
attributes to change the location of the dropdown.
Variations
To create a dropdown with groups you can use
dropdownDivider.
To create a dropdown with icons use class
dropdownOffsetButton
with
button.