HyMenubarItem

Usage examples on this page are written for Lit / plain HTML (<hy-menubar-item>). The same component ships as HyMenubarItem in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

A single top-level entry in an hy-menubar. Renders a trigger button (label from the label prop or the default slot) and owns one nested hy-menu provided via the menu slot.

When the parent menubar is in hover-tracking mode (another menubar item is already open), hovering this item switches the open menu to this one.

The nested hy-menu emits show/hide NON-bubbling, so this item listens directly on the menu element (target phase) rather than via the <slot name="menu"> — the menu is the single source of truth for menu visibility. This item then re-emits show/hide BUBBLING, which is the menubar coordination channel (hy-menubar delegates by target). See .claude/rules/events.md.

Examples

Top-level entry with its nested menu

<hy-menubar-item label="File">
  <hy-menu slot="menu">
    <hy-menu-item value="new" label="New" shortcut="⌘N"></hy-menu-item>
    <hy-menu-item value="open" label="Open…" shortcut="⌘O"></hy-menu-item>
    <hy-divider role="separator"></hy-divider>
    <hy-menu-item value="close" label="Close" shortcut="⌘W"></hy-menu-item>
  </hy-menu>
</hy-menubar-item>

API

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Trigger label. Falls back to the default slot when empty.
open	open	boolean	false	Controlled open state of the nested menu.
disabled	disabled	boolean	false	Disables the item — no activation, skipped in menubar nav.

Events

Event	Detail	Description
show	—	{ source } — bubbling; relayed from the nested menu.
hide	—	{ source } — bubbling; relayed from the nested menu.

Slots

Slot	Description
default	The trigger label (falls back to label prop).
menu	The nested hy-menu. Required — the item resolves its menu here; hy-menu-item children slotted directly are never rendered, and a dev-mode warning fires when the slot is empty.

Methods

focus()

Focus the trigger button.