Skip to content

HyMenuItem

A row inside an hy-menu. Renders a role="menuitem" button (or an <a> when href is set) with optional leading icon, trailing indicator, and shortcut hint.

The item emits select on activation. When href is set, the event fires synchronously before navigation; calling event.preventDefault() on the select event cancels the link follow. This matches native <a> + click semantics and lets consumers gate navigation (e.g. unsaved changes prompts).

Focus is driven by the parent hy-menu via roving tabindex on the shadow button — the item does not manage its own focusedness.

Events

  • select - { value, item, originalEvent } — bubbles to parent menu.

Slots

  • default - Default label content when the label prop is empty.
  • leading - Leading icon or avatar.
  • trailing - Trailing indicator (check, chevron, badge). The shortcut text takes this spot when no trailing slot is provided.

Methods

focus()

Imperative focus — called by the parent menu's roving tabindex logic.

setTabIndex()

Sets the internal button/anchor's tabindex AND mirrors the tab-stop state to the host's reflected [active] attribute so the focus trap can see which item is the current tab stop. Called by the parent menu's roving-tabindex controller.

Built with Lit. Documented with VitePress.