Source: https://tailwindcss.com/plus/ui-blocks/documentation/dropdown-menu

Getting started
Elements
- Introduction
- Autocomplete
- Command palette
- Dialog
- Disclosure
- Dropdown menu
- Popover
- Select
- Tabs

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

<el-dropdown>

Connects the button with the menu.

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

<el-menu>

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 eitherabsolute (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. |