Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

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.

Learn more

Menu patterns

Default dropdown

Use the standard dropdown trigger and menu layout.

Hover trigger

Change the trigger behavior from the default click interaction to hover.

Menu dividers

Separate related groups of dropdown items with dividers.

Menu items with icons

Add leading icons to dropdown items.

Section title

Add a non-interactive title row to label a group of menu items.

Menu header

Add a header area above the dropdown items.

Custom trigger button

Use a fully custom trigger while keeping the same dropdown menu behavior.

Icon-only trigger

Open the dropdown from an icon-only trigger button.

Animation styles

Scale transition

Open the dropdown with a scale animation.

Slide-up transition

Open the dropdown with a slide-up animation.

Inner translate animation

When Floating UI positions the menu with transforms, apply animation classes to an inner wrapper with data-hs-transition and translate utilities.

Behavior options

Auto close behavior

Control whether the dropdown closes on inside clicks, outside clicks, or both by using [--auto-close:inside], [--auto-close:outside], or [--auto-close:false].

Scope to window

Position the dropdown relative to the viewport instead of the parent container, which is helpful inside clipped or overflow: hidden layouts.

Show selectable dropdown items with checkboxes.

Show mutually exclusive dropdown items with radio controls.

Placement directions

Use [--placement:bottom | bottom-left | bottom-right] to place dropdown menus below the trigger.

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

Top placements

Use [--placement:top | top-left | top-right] to place dropdown menus above the trigger.

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

Right-side placements

Use [--placement:right | top-right | bottom-right] to place dropdown menus to the right of the trigger.

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

Left-side placements

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

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

Breakpoint-based alignment

Change dropdown placement at different breakpoints.

Resize the window to see the alignment change.

Breakpoint-based alignment in RTL

Apply the same responsive placement patterns in right-to-left layouts.

Destroy and reinitialize

Use the destroy method before reinitializing the component when dropdown instances need to be rebuilt.

© 2026 Preline Labs.