Menubar
A desktop-style horizontal bar of pull-down menus.
@garn/ui/menubarDefault
File and Edit menus with items and shortcuts.
Installation
garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.
npx garn-ui add menubar- Registry
menubar- Source
- menubar.tsx
- Deps
@radix-ui/react-menubarlucide-react- Registry deps
utils
Import
import { Menubar } from "@garn/ui/menubar";Props
Generated from the component's TypeScript types.
No component-specific props — this is a thin wrapper over its native element.
Styling
Target these data-slots and remap these tokens to restyle without forking the component.
[data-slot="menubar"]| Property | Token | Tier |
|---|---|---|
barHeight | --garn-control-h-md | semantic · air |
menuGap | --garn-gap-inline | semantic · air |
itemMinHeight | --garn-control-h-md | semantic · air |
Overview
Menubar is the persistent application menu bar — File / Edit / View … — for a desktop-like app or editor. Menubar is the bar (role=menubar), each MenubarMenu a top-level menu with its MenubarTrigger label and portaled MenubarContent pull-down of items. It's a specialized pattern for command-dense, desktop-style apps; for a single button menu use DropdownMenu, and for website navigation use NavigationMenu.
Guidelines
Reserve the menubar for genuinely app-like surfaces. It belongs in editors and tools with many grouped commands; on a typical website it's the wrong metaphor (use NavigationMenu) and a single overflow menu is a DropdownMenu. Use the conventional menu names where they apply (File/Edit/View).
Organize commands the way users expect. Group related actions, separate sections, and surface shortcut hints with MenubarShortcut (display-only — bind the keys yourself). Keep destructive items distinct and avoid burying frequent actions deep.
Honor the full keyboard model. Arrow keys move across the bar and within a menu, Esc closes, and roving focus follows APG — don't break it. Once one menu is open, hovering the others should open them, matching desktop behavior.
Best practices
- Reserve it for app-style command organization; keep top-level labels short.
- Group and separate items; show shortcuts with MenubarShortcut (and bind them).
- Control checkbox/radio item state.
- Don't use a menubar for site navigation.
- Don't overload it with rarely-used commands.
- Don't rely on MenubarShortcut to bind keys.
Content guidelines
- Use the conventional top-level names (File, Edit, View) and verb-first item labels.
- Keep wording consistent with the rest of the app; show shortcuts as hints.
Accessibility
- Role
menubar- ARIA APG
- menubar
- Focus
- Roving focus across the bar and into open menus.
Keyboard
| ArrowLeftArrowRight | Move between top-level menus. |
| ArrowDownEnterSpace | Open the focused menu. |
| ArrowUpArrowDown | Move between items in an open menu. |
| Escape | Close the open menu. |
| HomeEnd | Jump to the first / last item. |
- • The bar is role=menubar with roving focus; each menu is role=menu, items are menuitem / checkbox / radio.
- • Show real shortcuts with MenubarShortcut and actually bind the keys yourself (the hint is display only).
- Status
- Stable
- Version
v0.3.0- Introduced
v0.1.0
garn doesn't yet record a per-release version history. This reflects the component's current lifecycle state; full changelog entries will appear once the metadata pipeline emits a lifecycle.history field.