Skip to content

Menu

Actions list behind a trigger. Arrow keys travel, Escape returns to the trigger, outside clicks close.

Example

<Menu label="Account actions">
  <Button slot="trigger" variant="secondary" data-ink-menu-trigger>Account</Button>
  <a role="menuitem" href="/guides/theming">Profile settings</a>
  <button role="menuitem" type="button">Sign out</button>
</Menu>

Props

PropTypeDefaultDescription
labelstring-Menu landmark name.
alignstart | endstartWhich edge the list opens from.

Item contract

Items are your elements with role="menuitem" (links or buttons). The trigger carries slot="trigger" anddata-ink-menu-trigger; the script addsaria-haspopup/expanded itself.

Accessibility