/// Navigation

Menubar

Application menubar — a horizontal row of mono UPPERCASE menu triggers (File/Edit/View) opening raised panels of items, checkbox/radio items and submenus.

import { Menubar } from "@protocore/pds";

View as Markdown

Basics

Compose Menubar.Root with a Menubar.Menu per top-level heading. Each menu pairs a Menubar.Trigger with a Menubar.Content panel of Menubar.Items. Moving the pointer across triggers while one menu is open switches menus, just like a desktop app.

Checkbox, radio & submenus

Menus reuse the DropdownMenu recipes: Menubar.CheckboxItem, a Menubar.RadioGroup of Menubar.RadioItems, Menubar.Label section headings, Menubar.Separators, and nested Menubar.Sub / SubTrigger / SubContent.

When to use it

Use Menubar for the persistent, top-of-app command surface of a dense tool — an editor, a console, an admin workbench — where users expect a File/Edit/View row that groups many low-frequency actions.

A single button that reveals a menu is a DropdownMenu, not a Menubar.
A right-click surface on content is a ContextMenu.
A row of *always-visible* controls (not menus) is a Toolbar.
Primary section navigation belongs in a Sidebar or TopBar, not a menubar.

Usage

Group actions under conventional headings (File, Edit, View) users can predict.
Use CheckboxItem / RadioItem for toggles and modes so state is visible in the menu.
Reserve submenus for genuinely nested choices, not to hide overflow.
Give destructive items `tone="danger"` and keep them separated by a rule.

Don't

Don't use a Menubar for a single menu — a DropdownMenu is lighter.
Don't nest submenus more than one level deep; it gets hard to steer.
Don't put a primary, high-frequency action only in a menu — surface it in a Toolbar.
Don't hand-draw the trigger case — the recipe sets mono UPPERCASE.

Accessibility

Keys	Action
`Arrow Left / Right`	Move between top-level menus.
`Arrow Down / Up`	Open the focused menu and move between its items.
`Enter / Space`	Activate the focused trigger or item.
`Type a letter`	Jump to the next item starting with that character.
`Esc`	Close the open menu and return focus to its trigger.

Built on Radix Menubar — the bar is a `role="menubar"`, triggers are `menuitem`s, and each panel is a portalled `role="menu"` with `menuitem` / `menuitemcheckbox` / `menuitemradio` children.
Panels sit on the popover z-layer so a menubar hosted inside a Dialog or Sheet still paints above the modal overlay.
Focus is managed by Radix: opening a menu moves focus in, Escape returns it to the trigger, and roving arrow navigation runs throughout.