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.

Child components: <hy-menubar-item> — used only inside this one.

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.

When to use

• A desktop-style application with many commands in a few groups: File, Edit, View.

Do

• Follow the order people know from desktop software: File, Edit, View, then the product's own, Help last.

When not to use

• Fewer than three groups of commands: a hy-menu-button or two in a hy-topbar.
• One group of actions for one object: hy-menu-button. Actions for the thing under the pointer: hy-context-menu.
• Links to pages or sections: hy-sidebar, hy-tab-nav or hy-link items in a hy-topbar.
• Narrow touch screens: hy-bottombar or a hy-drawer. A menubar does not fit and its hover behavior has no touch equivalent.
• A command that runs at once with no menu: a hy-button or a hy-toolbar beside the bar. Every menubar item opens a menu.

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.