1. Components
  2. 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 Popper.js plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

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.

Scale animation

Experience the classic dropdown with an engaging scale animation effect.

Slide up animation

The base dropdown menu with slide up animation.

Transform style animation

We are using Popperjs 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.

Make the dropdown item appear with checkbox.

Make the dropdown item appear with radio.

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.