Skip to content

HyMenuButton

A trigger + menu pair implementing the ARIA menu-button pattern. The trigger is any element slotted into trigger; the menu surface is the child hy-menu (rendered in the default slot) or an actions shorthand.

Trigger shapes

  • Slotted trigger — put any element (hy-button, hy-icon-button, chip, avatar, …) into slot="trigger". You own the label, icons, and styling.
  • Default trigger — when label is set and slot="trigger" is empty, the component renders an internal hy-button caret truncate with the label text and a trailing chevron. The truncate flag means long labels clip with an ellipsis instead of overflowing the row, so the default trigger is safe to use as a "value picker" reflecting an unbounded current selection. Slotted triggers don't get this for free — set truncate on your own hy-button if you need it.

Composition contract

Slotted hy-menu-item children always win over the actions array — same precedence as hy-menu-item's own label prop losing to the default slot. When both are set in dev mode, a single console warning fires per element.

ARIA wiring

The trigger receives aria-haspopup="menu", aria-expanded, and an aria-controls pointing at the internally managed menu id. Clicks on the trigger toggle the menu; Escape from the menu returns focus to the trigger (delegated to hy-popover). A host aria-label forwards to the default trigger, naming the control when the visible label is a current value (e.g. a picker showing "solid") rather than what the control does.

Events

  • select - Relayed from the child menu. Detail: MenuSelectDetail.
  • change - Relayed from the child menu when a radio group changes. Detail: MenuChangeDetail{ selectedValue, name, reason }.
  • show - Relayed from the child menu (does NOT bubble).
  • hide - Relayed from the child menu (does NOT bubble).

Slots

  • trigger - The trigger element (button, icon-button, chip, avatar, …). When empty and label is set, an internal hy-button caret truncate is rendered (long labels clip with an ellipsis).
  • default - hy-menu-item / hy-menu-item-checkbox / hy-menu-item-radio / hy-menu-group / hy-divider children.

Built with Lit. Documented with VitePress.