Holo Menu & Menu Item

<holo-menu> is a popup menu built on the native Popover API (like <holo-popover>). Put a trigger element in the trigger slot and <holo-menu-item> children in the default slot. Arrow keys / Home / End move focus between items, Enter/Space activates the focused item, and Esc closes the menu and returns focus to the trigger.

Live Previews

Default

Edit

Duplicate

Delete

<holo-menu>
  <button slot="trigger" type="button">Open menu</button>
  <holo-menu-item value="edit">Edit</holo-menu-item>
  <holo-menu-item value="duplicate">Duplicate</holo-menu-item>
  <holo-menu-item value="delete">Delete</holo-menu-item>
</holo-menu>

Handling selection

<holo-menu>
  <button slot="trigger">Actions</button>
  <holo-menu-item value="edit">Edit</holo-menu-item>
  <holo-menu-item value="delete">Delete</holo-menu-item>
</holo-menu>
<script>
  const menu = document.querySelector('holo-menu');
  menu.addEventListener('holoMenuSelect', event => console.log(event.detail));
</script>

API Reference

`holo-menu` Properties

| Property | Attribute | Description | Type | Default | | ----------- | ----------- | ---------------------------------------------------- | --------------------------------------- | ---------- | | open | open | Whether the menu popup is shown. | boolean | false | | placement | placement | Which side of the trigger the menu is positioned on. | 'top' \| 'bottom' \| 'start' \| 'end' | 'bottom' |

`holo-menu` Events

| Event | Description | Type | | ---------------- | ------------------------------------------------------------------------ | --------------------- | | holoOpen | Emitted after the menu has opened. | CustomEvent<void> | | holoClose | Emitted after the menu has closed and focus has returned to the trigger. | CustomEvent<void> | | holoMenuSelect | Emitted with the activated holo-menu-item’s value. | CustomEvent<string> |

`holo-menu-item` Properties

| Property | Attribute | Description | Type | Default | | ---------- | ---------- | ---------------------------------------------------------------------- | --------- | ------- | | value | value | The value reported in holoMenuSelect when this item is activated. | string | — | | disabled | disabled | If true, this item is disabled and skipped during keyboard navigation. | boolean | false |