Dropdown menu

A commercial license is required to use Tailwind Plus Elements.

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.

Examples

Basic example

Use the <el-dropdown> and <el-menu> components, along with a native <button>, to build a dropdown menu:

<el-dropdown>
  <button type="button">Options</button>
  <el-menu anchor="bottom start" popover>
    <button class="focus:bg-gray-100" type="button">Edit</button>
    <button class="focus:bg-gray-100" type="button">Duplicate</button>
    <hr role="none" />
    <button class="focus:bg-gray-100" type="button">Archive</button>
    <button class="focus:bg-gray-100" type="button">Delete</button>
  </el-menu>
</el-dropdown>

All focusable children within the <el-menu> component will be considered options.

Using with buttons

When using a <button> as a dropdown item, the onclick event will be invoked when it's selected:

<el-dropdown>
  <button type="button">Options</button>
  <el-menu popover>
    <button onclick="viewUser()" type="button">View</button>
    <button onclick="editUser()" type="button">Edit</button>
    <button onclick="deleteUser()" type="button">Delete</button>
  </el-menu>
</el-dropdown>

Using with links

When using an <a> as a dropdown item, the href attribute will be used to navigate to the link when it's selected:

<el-dropdown>
  <button type="button">Options</button>
  <el-menu popover>
    <a href="/users/1">View</a>
    <a href="/users/1/edit">Edit</a>
    <a href="/users/1/delete">Delete</a>
  </el-menu>
</el-dropdown>

Disabling an item

Use the disabled attribute on button dropdown items to prevent them from being selected:

<el-dropdown>
  <button type="button">Options</button>
  <el-menu popover>
    <button onclick="viewUser()" type="button">View</button>
    <button onclick="editUser()" type="button">Edit</button>
    <button disabled type="button">Delete</button>
  </el-menu>
</el-dropdown>

The <el-menu> has no width set by default, but you can add one using CSS:

<el-menu popover class="w-52">
  <!-- ... -->
</el-menu>

If you'd like the dropdown width to match the <button> width, use the --button-width CSS variable that's exposed on the <el-menu> element:

<el-menu popover class="w-(--button-width)">
  <!-- ... -->
</el-menu>

Add the anchor prop to the <el-menu> to automatically position the dropdown relative to the <button>:

<el-menu popover anchor="bottom start">
  <!-- ... -->
</el-menu>

Use the values top, right, bottom, or left to center the dropdown along the appropriate edge, or combine it with start or end to align the dropdown to a specific corner, such as top start or bottom end.

To control the gap between the button and the dropdown, use the --anchor-gap CSS variable:

<el-menu popover anchor="bottom start" class="[--anchor-gap:4px]">
  <!-- ... -->
</el-menu>

Additionally, you can use --anchor-offset to control the distance that the dropdown should be nudged from its original position.

Adding transitions

To animate the opening and closing of the dropdown, target the data-closed, data-enter, data-leave, and data-transition attributes with CSS to style the different stages of the transition:

<el-menu popover class="transition transition-discrete data-closed:opacity-0 data-enter:duration-75 data-enter:ease-out data-leave:duration-100 data-leave:ease-in">
  <!-- ... -->
</el-menu>

Getting started

Elements

Dropdown menu

Component API

<el-dropdown>

<el-menu>