Menubar

hc-menubar is the desktop application menu bar pattern: a horizontal row of menu buttons (File / Edit / View …), each opening an hc-menu dropdown. It is a thin layer over the existing menu machinery — installMenu() owns the dropdown internals (ARIA, in-menu keyboard, submenus); installMenubar() adds the bar navigation.

Also known as: application menu.

Browser baseline

Primitive	Required version
HTML `popover`	Chrome 114, Edge 114, Firefox 125, Safari 17
CSS Anchor Positioning	Chrome 125, Edge 125, Firefox 147, Safari 26

The dropdowns are ordinary hc-menu popovers, so when Anchor Positioning is missing installMenu() falls back to getBoundingClientRect positioning — the menus still open, dismiss, and behave correctly everywhere popover is supported.

Basic HTML

<div class="hc-menubar" role="menubar" aria-label="Application">
  <button class="hc-menubar__item" role="menuitem" type="button"
          popovertarget="mb-file" id="mb-file-t">File</button>
  <div class="hc-menu" id="mb-file" popover role="menu" aria-labelledby="mb-file-t">
    <button class="hc-menu__item" role="menuitem" type="button">New</button>
    <button class="hc-menu__item" role="menuitem" type="button">Open…</button>
    <hr class="hc-menu__separator">
    <button class="hc-menu__item" role="menuitem" type="button">Save</button>
  </div>

  <button class="hc-menubar__item" role="menuitem" type="button"
          popovertarget="mb-edit" id="mb-edit-t">Edit</button>
  <div class="hc-menu" id="mb-edit" popover role="menu" aria-labelledby="mb-edit-t">
    <button class="hc-menu__item" role="menuitem" type="button">Undo</button>
    <button class="hc-menu__item" role="menuitem" type="button">Redo</button>
  </div>

  <!-- … a View pair follows the same button + menu shape … -->
</div>

import { installMenu, installMenubar } from '@hypermedia-components/core';
installMenu();     // dropdown internals
installMenubar();  // the bar navigation

installMenubar() is idempotent and returns an uninstaller (so is installMenu()). The zero-config @hypermedia-components/core/behaviors entry auto-installs both and picks up content swapped in by htmx.

Each top button is a role="menuitem" that targets its dropdown with popovertarget; the dropdowns are ordinary hc-menu popovers (so they get submenus, checkbox/radio items, and the hc:menuselect event for free).

Keyboard

Key	Action
`←` / `→`	Move between top items (mirrored in RTL). Wraps at the ends.
`Home` / `End`	First / last top item.
`↓` / `Enter` / `Space`	Open the focused menu (↓ focuses the first item).
`↑`	Open the focused menu at its last item.
`←` / `→` (menu open)	Switch to the adjacent menu and open it.
`Esc`	Close the menu, returning focus to its top item.

A submenu parent still opens its submenu on → (the menubar defers to the submenu machinery), so nested menus keep working.

Accessibility

The bar is role="menubar" with an aria-label; each top button is a role="menuitem" and gets aria-haspopup="menu" / aria-expanded wired by installMenu().
The bar is a single Tab stop (roving tabindex); arrow keys move within it, matching the WAI-ARIA APG menubar pattern.
Label each dropdown (aria-labelledby pointing at its button, or aria-label) so the open menu has an accessible name.

Theming tokens

Token path	Purpose
`menubar.gap`	Gap between top items.
`menubar.padding-x` / `-y`	Bar padding.
`menubar.bg`	Bar background.
`menubar.border`	Bar border.
`menubar.radius`	Bar corner radius.
`menubar.item-padding-x` / `-y`	Top item padding.
`menubar.item-radius`	Top item radius.
`menubar.item-fg`	Top item text color.
`menubar.item-hover-bg`	Top item hover / open background.

CSS variables

Show the generated CSS variables

--hc-menubar-gap | -padding-x | -padding-y | -bg | -border | -radius
--hc-menubar-item-padding-x | -item-padding-y | -item-radius | -item-fg | -item-hover-bg

Menu — the dropdown each top item opens (and the submenu pattern).
Toolbar — a roving-tabindex row of controls (not menus).