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.

Used inside <hy-menubar> — it only means something as part of it.

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

When not to use

• A single button that opens a menu, outside a menubar: hy-menu-button.
• A top-level command that opens no menu: put it inside one of the menus, or on a button in a hy-toolbar.

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></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	Whether the nested menu is open. Setting it (attribute or property, including open in markup) shows the menu anchored below this item, or hides it; the menu's own closes (Escape, outside click, selection) set it back to false.
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
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.