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 .dropdown-header for the header of groups and for separation of group you can use dropdownDivider.

To create a dropdown with icons use class dropdownOffsetButton with button.