Skip to content

HyMenu

A role="menu" panel composed on top of hy-popover. Owns keyboard navigation (Arrow, Home/End, typeahead), roving tabindex, and submenu coordination. Items are slotted in the default slot and may be grouped with hy-menu-group or separated with hy-divider.

Trigger patterns

By id — pass for="<id>" referencing the trigger. Requires a manual click handler on the trigger to call menu.toggle().

Programmatic — call menu.show(anchor?) with an optional element. When an element is passed, the menu anchors to it (generating an id if the element doesn't already have one).

Composite triggershy-menu-button, hy-context-menu, and hy-menubar-item wrap hy-menu and handle trigger wiring themselves.

Events

  • select - { value, item, originalEvent } — bubbled up when any child item fires select.
  • show - { source } — forwarded from the underlying popover (does NOT bubble).
  • hide - { source } — forwarded from the underlying popover (does NOT bubble).
  • request-show - { source } — cancelable, forwarded from popover.
  • request-hide - { source } — cancelable, forwarded from popover.

Slots

  • default - Menu items (hy-menu-item, checkbox/radio variants, groups, dividers).

Methods

show()

Open the menu. When anchor is passed, it becomes the popover's anchor element (an id is generated on the element if it doesn't have one).

focusItem()

Focus a menu item by its index in the collected items list.

getItems()

Return the currently collected items (light-DOM order, including grouped).

Built with Lit. Documented with VitePress.