- Components
- Dropdown
Dropdown
Tailwind CSS Dropdown
The Dropdown component is designed to present users with a neat and organized list of actions or additional content. Enabled by a JavaScript dropdown plugin, it ensures a smooth, collapsible interface for enhanced navigation and space efficiency.
Requires JS
Note that this component requires the use of the third-party Floating UI plugin, else you can skip this message if you are already using Preline UI as a package.
Transform style animation
We are using Floating UI library for dropdown and tooltip and this library uses hardcoded styles like transform for menu positioning. 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
By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the --auto-close:inside (outside | false) class to change this behavior of the dropdown.
Scope Window New
By default, dropdown menus are scoped to their parent container. Use the [--scope:window] class to make the dropdown menu position itself relative to the viewport instead of its parent container, which is useful when the dropdown is inside a container with overflow: hidden or similar CSS properties.
Dropdown
Use [--placement:bottom | bottom-left | bottom-right] class to trigger dropdown menus above elements.
This example uses [--placement:bottom-left] class.
Dropup
Use [--placement:top | top-left | top-right] class to trigger dropdown menus above elements.
This example uses [--placement:top-left] class.
Dropright
Use [--placement:right | top-right | bottom-right] class to trigger dropdown menus at the right of the elements.
This example uses [--placement:bottom-right] class.
Dropleft
Use [--placement:left | top-left | bottom-left] class to trigger dropdown menus at the left of the elements.
This example uses [--placement:bottom-left] class.
Responsive alignment
Control dropdown menu positions on the different breakpoints.
Resize the window to see it in action.
