Skip to content
Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

Menu

A button-triggered actions menu, rendered as <section is="root-menu">.

Usage

The first <button> is the trigger; the rest become menu items.

<section is="root-menu" label="Actions">
  <button>Actions</button>
  <button value="edit">Edit</button>
  <button value="duplicate">Duplicate</button>
  <button value="delete">Delete</button>
</section>

Keyboard
Key Action
ArrowDown / Enter / Space (on trigger) Open and focus the first item
ArrowUp / ArrowDown Move between items (wrapping)
Home / End First / last item
Enter / Space Select the focused item
Escape / Tab Close and return focus to the trigger

Attributes
Attribute Type Default Description
label string trigger text Accessible name for the menu surface

Events
Event Detail Description
root-menu.open - Fired when the menu opens
root-menu.close - Fired when the menu closes
root-menu.select { value, item } Fired when an item is picked

Extends

HTMLElement - use with <section is="root-menu">. The trigger gets aria-haspopup="menu"/aria-expanded; items are role="menuitem" inside a menu[role="menu"] surface.