The Menubar component renders a horizontal application-style menu bar — the kind found at the top of desktop applications. Built on Radix UI primitives, it supports keyboard navigation, submenus, checkboxes, radio groups, and keyboard shortcuts.
Basic Usage
Full Text Editor
A realistic text-editor menubar with File, Edit, View, and Help menus, including submenus, checkboxes, and a radio group.
With Checkboxes
A stateful View menu demonstrating toggled MenubarCheckboxItem entries controlled with useState.
With Radio Group
A stateful example where a MenubarRadioGroup controls the active theme selection.
Properties
| Property | Type | Description |
|---|
className | string | Additional CSS classes. Renders as a horizontal flex bar with border and shadow. |
children | React.ReactNode | One or more MenubarMenu components. |
| Property | Type | Description |
|---|
value | string | A unique value for the menu (used when controlling the open menu externally). |
children | React.ReactNode | A MenubarTrigger + MenubarContent pair. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for the trigger tab. |
children | React.ReactNode | The label text displayed in the menu bar. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for the dropdown panel. |
align | "start" | "center" | "end" | Alignment against the trigger. Default: "start". |
alignOffset | number | Offset along the alignment axis. Default: -4. |
sideOffset | number | Distance from the trigger. Default: 8. |
| Property | Type | Description |
|---|
inset | boolean | Adds left padding to align with items that have icons. |
disabled | boolean | When true, prevents interaction with the item. |
onSelect | (event: Event) => void | Event handler called when the item is selected. |
className | string | Additional CSS classes for custom styling. |
| Property | Type | Description |
|---|
checked | boolean | "indeterminate" | The controlled checked state of the item. |
onCheckedChange | (checked: boolean) => void | Event handler called when the checked state changes. |
disabled | boolean | When true, prevents interaction with the item. |
className | string | Additional CSS classes for custom styling. |
| Property | Type | Description |
|---|
value | string | The controlled value of the selected radio item. |
onValueChange | (value: string) => void | Event handler called when the selected value changes. |
| Property | Type | Description |
|---|
value | string | The unique value of the radio item. |
disabled | boolean | When true, prevents interaction with the item. |
className | string | Additional CSS classes for custom styling. |
| Property | Type | Description |
|---|
inset | boolean | Adds left padding to align the label with inset menu items. |
className | string | Additional CSS classes for custom styling. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for custom styling. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for custom styling. |
children | React.ReactNode | The shortcut text displayed on the right side of a menu item (e.g., ⌘S). |
| Property | Type | Description |
|---|
inset | boolean | Adds left padding for alignment with items that have icons. |
className | string | Additional CSS classes for custom styling. |
children | React.ReactNode | The label for the submenu trigger. A chevron icon is appended automatically. |
Accessibility
The Menubar component includes comprehensive accessibility features:
- Keyboard Navigation - Arrow keys move between menus and items; Enter opens a menu or selects an item; Escape closes the open menu
- Focus Management - Focus moves into the open menu and returns to the trigger on close
- Screen Reader Support - ARIA
menubar, menu, menuitem, menuitemcheckbox, and menuitemradio roles
- Type-ahead - Typing a character jumps to the first matching item in the open menu
- Roving Tabindex - Only the active trigger is focusable in the bar at any time
Common Use Cases
The Menubar component is ideal for:
- Text and Code Editors - File, Edit, View, and Help menus with shortcuts
- Design Tools - Layer actions, view toggles, grid and guide options
- Admin Dashboards - Navigation structure that mirrors a desktop application
- Data Tools - Import, export, filter, and view configuration menus
- Settings Pages - Organized preference panels with checkboxes and radio groups
Best Practices
- Follow desktop conventions - Users expect menu bar labels like File, Edit, View, Help
- Group logically - Use
MenubarSeparator and MenubarLabel to organize related items
- Include keyboard shortcuts - Add
MenubarShortcut for frequently used actions
- Limit top-level menus - Keep the bar readable; avoid more than 6-7 top-level triggers
- Disable unavailable items - Use
disabled rather than hiding items to maintain layout stability
- Use submenus sparingly - One level of nesting is usually sufficient; avoid deeper hierarchies
- Keep trigger labels short - Single words like "File" or "View" work best in the bar