5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Dropdown menu

A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.

The <el-dropdown> component makes it easy to build dropdown menus with full keyboard support and built-in anchoring to control where the dropdown appears relative to its trigger.

Component API

Connects the button with the menu.

CSS variables
`--input-width`	Provides the width of the input element (read-only).

Contains all the menu items. All focusable children will be considered options.

Attributes
`popover`	Required to enable the popover behavior.
`open`	Controls the open/closed state of the menu.
`anchor`	Where to position the dropdown menu. Supports values like "bottom", "bottom-start", "bottom-end", etc.
`anchor-strategy`	Sets the `position` CSS property of the popover to either`absolute` (default) or `fixed`.
CSS variables
`--anchor-gap`	Sets the gap between the anchor and the popover.
`--anchor-offset`	Sets the distance that the popover should be nudged from its original position.
Data attributes (Read-only)
`data-closed`	Present before transitioning in, and when transitioning out.
`data-enter`	Present when transitioning in.
`data-leave`	Present when transitioning out.
`data-transition`	Present when transitioning in or out.
Methods
`togglePopover()`	Toggles the menu visibility.
`showPopover()`	Shows the menu.
`hidePopover()`	Hides the menu.