Dropdowns
Default
The default dropdown menu appearance.
Hover event
The default trigger mode is click, you can change it to hover.
Dividers
The default dropdown menu with dividers.
Icons
The default dropdown menu with icons.
Title
The default dropdown menu with title.
With header
The default dropdown menu with header.
Custom trigger
The default dropdown menu with custom trigger.
Custom icon trigger
The default dropdown menu with custom icon-trigger.
Slide up animation
The base dropdown menu with slide up animation.
Transform style
In this situation we can use Tailwind translate classes for sub-container inside menu, also just add data-hs-transition attribute for the sub-container.
Auto close behavior
You can use the data-hs-dropdown-auto-close="inside | outside | false" option to change this behavior of the dropdown.
Dropdown item checkbox
Make the dropdown item appear with checkbox.
Dropdown item radio
Make the dropdown item appear with radio.
Dropdown
Use [--placement:bottom | bottom-left | bottom-right] class to trigger dropdown menus above elements.
Dropright
Use [--placement:bottom | bottom-left | bottom-right] class to trigger dropdown menus above elements.
Responsive alignment
Control dropdown menu positions on the different breakpoints.