Dropdown (actions menu)

A small menu of actions attached to a button. Without JavaScript the native <details> opens and closes and the items are ordinary buttons and links. With it, the menu follows the ARIA menu button pattern. This is not a navigation menu: use links, a disclosure or the drawer for that.

CSS: css/components/dropdown.css. JS: @intervolutions/ivolt/dropdown or auto.js.

A menu under its triggerfixtures/dropdown/basic.htmlOpen alone

<details class="iv-dropdown" data-iv-component="dropdown" data-iv-placement="bottom-start">
  <summary class="iv-button iv-button--secondary">Actions</summary>
  <div class="iv-dropdown__menu">
    <button class="iv-dropdown__item" type="button">Duplicate project</button>
    <button class="iv-dropdown__item" type="button">Export as CSV</button>
    <hr class="iv-dropdown__separator">
    <a class="iv-dropdown__item" href="#dropdown-note">Read the retention policy</a>
  </div>
</details>

<p id="dropdown-note">Exported files are kept for thirty days and then deleted from the storage bucket.</p>

// data-iv-component="dropdown"
{
  placement: "bottom-start",
}

Options

Option	Attribute	Default
`placement`	`data-iv-placement`	`bottom-start` (`bottom-end` aligns to the end edge)
`closeOnSelect`	`data-iv-close-on-select`	`true`

Keyboard

Enter, Space or Down on the button opens the menu and focuses the first item; Up/Down move with wrap-around, Home/End jump; Escape closes and returns focus; Tab closes without trapping.

Events

iv:open/iv:close (cancelable) and iv:opened/iv:closed; open(), close(), toggle(), isOpen.

Common mistakes

Using role="menu" for a list of navigation links.
Menus with more than about seven items; use a page instead.

Class index

Parts and modifiers of this family that the examples above do not show. The full list per stylesheet lives in the reference.

Class	What it does
`iv-dropdown--end`	Aligns the menu with the end edge of the trigger.

Every content component