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.

When to use

Use it for:

• A short list of commands attached to a trigger: row actions, account menu, “More” overflow.
• Actions the user performs one at a time, then the menu closes.

Don’t use it for:

• Site navigation. Use Links inside a <nav>.
• Choosing a value for a form field. Use Select.
• Arbitrary content, forms or rich layouts. Use Popover.

Live Previews

Default

Open menu

EditDuplicateDelete

<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

Actions

EditDelete

Selected: none

<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>

Accessibility

The menu uses the Popover API (popover="auto") on an element with role="menu". Each <holo-menu-item> sets role="menuitem" on itself and takes tabindex="-1". The trigger goes in the trigger slot. The component sets aria-haspopup="menu" on it (unless you already set one) and keeps aria-expanded in sync.

Key	Action
Enter, Space	On a button trigger, opens the menu (native click). On an item, selects it
ArrowDown	On the trigger: opens the menu and focuses the first item. In the menu: next item (wraps)
ArrowUp	On the trigger: opens the menu and focuses the last item. In the menu: previous item (wraps)
Home	Focuses the first item
End	Focuses the last item
Esc	Closes the menu and returns focus to the trigger

• When the menu opens, focus moves to the first enabled item. When it closes, focus returns to the trigger.
• Items use roving tabindex: only the focused item has tabindex="0".
• Disabled items set aria-disabled="true" and are skipped by arrow-key navigation.
• Selecting an item emits holoMenuSelect, then closes the menu. Clicking outside also closes it (native light dismiss).
• There is no type-ahead (jumping by typed letter) and no support for submenus or checkable items.
• The open and close transition only runs when prefers-reduced-motion: no-preference.

You provide:

• A trigger that is a focusable, named control, normally a Button or Icon Button with a clear label.
• Short, distinct item text.

---

API Reference

holo-menu

Importing

import '@philbob-sideprojects/hololink-ui/holo-menu';

Properties

Property	Attribute	Type	Default	Description
open	open	boolean	false	Whether the menu popup is shown. Setting this to true calls the native showPopover(); setting it to false calls hidePopover().
placement	placement	"bottom" | "end" | "start" | "top"	'bottom'	Which side of the trigger the menu is positioned on.

Events

Event	Detail	Description
holoClose	void	Emitted after the menu has closed (via Esc, outside click, item selection, or open being set to false). Focus then returns to the trigger.
holoMenuSelect	string	Emitted when a holo-menu-item is activated. detail is the item's value. The menu closes afterwards.
holoOpen	void	Emitted after the menu has opened.

Slots

Slot	Description
(default)	The holo-menu-item elements shown in the popup.
trigger	The element that opens and closes the menu, typically a holo-button. It receives aria-haspopup and aria-expanded automatically.

CSS custom properties

Property	Description
--holo-menu-bg	Background color of the menu popup.
--holo-menu-border-color	Border color of the menu popup.
--holo-menu-padding	Inner padding of the menu popup.
--holo-menu-radius	Corner radius of the menu popup.
--holo-menu-shadow	Box shadow of the menu popup.
--holo-menu-text-color	Text color of the menu popup.

holo-menu-item

Importing

import '@philbob-sideprojects/hololink-ui/holo-menu-item';

Properties

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

Events

Event	Detail	Description
holoMenuItemSelect	string	Emitted (bubbles + composed) when the user activates this item, so the owning holo-menu can select it and close.

Slots

Slot	Description
(default)	The item's visible label.

CSS custom properties

Property	Description
--holo-menu-item-hover-bg	Background color of the item when hovered or focused.
--holo-menu-item-text-color	Text color of the item.