Overlays
Dropdown
The Dropdown neatly displays Dropdown or content using a JavaScript plugin, offering a compact interface for easy navigation and space-saving.
Basic example
Default
Basic dropdown example.
Menu content
Dropdown header
Use `dropdown-header` class to display extra information separately from the menu items in the dropdown.
Dropdown footer
Use the `dropdown-footer` class to present additional information distinct from the dropdown menu items, at the bottom.
Dropdown title
Use `dropdown-title` class to present titile for the dropdown content.
Dropdown form
Using form within a dropdown menu.
Dropdown radio
Put radio inside `dropdown-item`. Make the dropdown item appear with radio.
Dropdown checkbox
Put checkbox inside `dropdown-item`. Make the dropdown item appear with checkbox.
Dropdown with switch
Put switch inside `dropdown-item`. Make the dropdown item appear with switch.
Nested dropdowns
Create nested dropdowns by adding a dropdown within a dropdown.
Custom trigger
Menu icon
Use the menu icon trigger element on components such as cards as an alternative element to the button.
Split dropdown
Demonstration of a split dropdown.
Trigger with avatar
Dropdown with avatar.
Animations
Slide up animation
The basic dropdown menu featuring a slide-up animation.
Transform animation
Use `dropdown-open:{tw-utility-class}` modifier to introduce animation to your dropdown menu. The following example demonstrates a scaling animation.
Animation items
Apply the `dropdown-open:{tw-utility-class}` modifier to introduce animation to your dropdown menu sub container. Also add `data-dropdown-transition` attribute for the sub-container.
Dropdown state
Active state
Add class `.dropdown-active` to set the active state.
Disabled state
Add class `.dropdown-disabled` to set the disabled state.
Illustrations
Hover
The default trigger mode is click, you can change it to hover by adding `[--trigger:hover]` with `dropdown`.
Dividers
The default dropdown menu with dividers.
Icons
The standard dropdown menu featuring icons.
Shortcuts
The standard dropdown menu with shortcuts using `keyboard` component.
Dropdown with scrollable body
Apply the `overflow-y-auto` class to create a scrollable area, and define the minimum height for this container.
Dropdown input
With `join` you can combine a dropdown and input into one unit.
Destroy/Reinitialize
The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a dropdown element.
Responsive
Dropright at sm
Apply the <a href="https://tailwindcss.com/docs/hover-focus-and-other-states#responsive-breakpoints" class="link link-primary" target="_blank" >Responsive modifier</a> to adapt the dropdown position across different viewport sizes.
Options usage
Auto close behavior
Info: We are using <a href="https://floating-ui.com/" class="link link-primary" target="_blank">FloatingUI</a> library for dropdown and tooltip.
Strategy
By default, the `strategy` is set to 'fixed'. To switch it to 'absolute', use the `[--strategy:*]` option.
Offset
Use `[--offset:*]` to set the number of pixels you want the dropdown menu to be offset from the trigger element.
No flip
If you prefer to disable the automatic positioning of the `dropdown-menu`.
Direction — Dropup
By default the dropdown direction is bottom-start. To change it use `[--placement:*]`. For centered use simple `top`, `bottom`, `right`, `left` direction.
Direction — Dropdown
Use `[--placement:bottom | bottom-start(DEFAULT) | bottom-end]` class to trigger dropdown menus above elements.
Direction — Dropright
Use `[--placement:right | right-start | right-end]` class to trigger dropright menus above elements.
Direction — Dropleft
Use `[--placement:left | left-start | left-end]` class to trigger dropleft menus above elements.
JavaScript behavior
Methods — Method usage
The `HSDropdown` object is contained within the global `window` object.
JavaScript
const dropdown = document.querySelector('#dropdown-to-destroy')
const destroy = document.querySelector('#destroy-btn')
destroy.addEventListener('click', () => {
const { element } = HSDropdown.getInstance(dropdown, true)
element.destroy()
})Events — Event usage
METHOD| DESCRIPTION `on:open`|Triggered whenever a dropdown menu is opened. `on:close`|Triggered whenever a dropdown menu is closed.
JavaScript
const { element } = HSDropdown.getInstance('#dropdown-event', true)
element.on('open', (instance) => {console.log("open")});
element.on('close', (instance) => {console.log("close")});Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
dropdown | component | Container for the dropdown. |
dropdown-toggle | part | Toggle button for the dropdown. |
dropdown-menu | part | Container for the dropdown menu. |
dropdown-title | part | Adds a title to the dropdown. |
dropdown-header | part | Adds a header to the dropdown. |
dropdown-footer | part | Adds a footer to the dropdown. |
dropdown-toggle-wrapper | part | A wrapper for a Dropdown toggle, this is useful when some other element is placed in the Dropdown toggle. For example. if you want to place a "+" button inside an existing Dropdown toggle button that opens a modal. |
dropdown-item | part | Styles applied to individual dropdown items. |
dropdown-open:{tw-utility-class} | variant | Modifies tailwind classes when the dropdown menu is open. |
dropdown-close | modifier | Dropdown close element (can be multiple). |
dropdown-active | state | Applies active styling to dropdown items. |
dropdown-disabled | state | Applies disabled styling to dropdown items. |