Menubar
Desktop-app style menu bar (File / Edit / View). Horizontal menu strip with nested dropdowns.
Installation
pnpm
pnpm dlx @hex-core/cli add menubarAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled open menu id |
defaultValue | string | — | Default open menu for uncontrolled usage |
onValueChange | function | — | Callback when open menu changes |
loop | boolean | true | When true, arrow-key navigation wraps |
dir | "ltr" | "rtl" | — | Reading direction |
className | string | — | Additional CSS classes on the Menubar root |
AI Guidance
When to use
Use for desktop-app shell menus: editors, IDEs, creative tools. Provides persistent menu bar with keyboard shortcuts.
When not to use
Don't use for website navigation (use NavigationMenu). Don't use for single-button menus (use DropdownMenu). Poor fit for mobile — consider a hamburger menu.
Common mistakes
- Using for website navigation (user expectations don't match)
- Missing shortcuts (expected affordance in menubar UX)
- Deeply nested sub-menus (>2 levels feels labyrinthine)
Accessibility
Full WAI-ARIA menubar pattern: arrow keys navigate menus, Enter/Space opens, Escape closes. Radix handles roles and state.
Related components
Token budget: 700