HyMenubar

Usage examples on this page are written for Lit / plain HTML (<hy-menubar>). The same component ships as HyMenubar 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 horizontal role="menubar" container. Owns cross-item keyboard navigation (ArrowLeft / ArrowRight / Home / End) and the hover-tracking flag that makes "open one menubar dropdown, move mouse, next menubar dropdown opens on hover" work the way desktop menus do.

Items are slotted hy-menubar-item elements.

Examples

Application menu bar

<hy-menubar>
<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-menu-item value="save" label="Save" shortcut="⌘S"></hy-menu-item>
</hy-menu>
</hy-menubar-item>
<hy-menubar-item label="Edit">
<hy-menu slot="menu">
<hy-menu-item value="undo" label="Undo" shortcut="⌘Z"></hy-menu-item>
<hy-menu-item value="redo" label="Redo" shortcut="⇧⌘Z"></hy-menu-item>
</hy-menu>
</hy-menubar-item>
</hy-menubar>
<script>
document.querySelector('hy-menubar').addEventListener('select', (e) => {
console.log(e.detail.value);
});
</script>

API

Properties

Property	Attribute	Type	Default	Description
tracking	—	boolean	—	Returns whether any child menubar item currently has its menu open.

Slots

Slot	Description
default	hy-menubar-item children.

Methods

getItems()

Returns all slotted menubar items in source order.