1. Overlays
  2. Dropdown

Components

Tailwind CSS Dropdown

A dropdown menu displays a list of actions and more with JavaScript dropdown plugin.

Requires JS

Note that this component requires the use of our Dropdown plugin, else you can skip this message if you are already using Preline UI as a package.

Basic usage

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.

Animations

Slide up animation

The base dropdown menu with slide up animation.

Transform style

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.

Options

Auto close behavior

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the data-hs-dropdown-auto-close="inside | outside | false" option to change this behavior of the dropdown.

Make the dropdown item appear with checkbox.

Make the dropdown item appear with radio.

Directions

Use [--placement:bottom | bottom-left | bottom-right] class to trigger dropdown menus above elements.

This example uses [--placement:bottom-right] 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 | right-top | right-bottom] class to trigger dropdown menus at the right of the elements.

This example uses [--placement:right-top] class.

Dropleft

Use [--placement:left | left-top | left-bottom] class to trigger dropdown menus at the left of the elements.

This example uses [--placement:left-top] class.

Responsive alignment

Control dropdown menu positions on the different breakpoints.

Resize the window to see it in action.