Components
Menubar
A desktop-style application menu bar — a persistent horizontal set of dropdown menus for organizing commands, shortcuts, and toggles.
Basic usage
Compose MenubarMenu blocks inside a Menubar. Open state is managed by Radix, so no useState is required.
Checkbox & radio items
Use MenubarCheckboxItem for toggles and MenubarRadioGroup for single-choice options.
Submenus & destructive items
Nest MenubarSub for cascading menus, and pass variant="destructive" to flag dangerous actions.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
Menubar | MenubarPrimitive.Root | — | Root container that renders the horizontal bar of menus and manages roving focus between them. |
MenubarMenu | MenubarPrimitive.Menu | — | Wraps a single trigger and its content. Accepts an optional `value` to control which menu is open. |
MenubarTrigger | MenubarPrimitive.Trigger | — | The button in the bar that opens its menu on click or keyboard activation. |
MenubarContent | MenubarPrimitive.Content | — | The floating panel of items. Defaults: align="start", alignOffset={-4}, sideOffset={8}. |
MenubarItem | MenubarPrimitive.Item | variant 'default' | Selectable row. Accepts `inset` (boolean) and `variant: 'default' | 'destructive'`. |
MenubarCheckboxItem | MenubarPrimitive.CheckboxItem | — | Toggleable item with a check indicator. Controlled via `checked` / `onCheckedChange`. |
MenubarRadioGroup | MenubarPrimitive.RadioGroup | — | Groups radio items and tracks the selected `value`. |
MenubarRadioItem | MenubarPrimitive.RadioItem | — | Single-choice item. Requires a `value` and renders a dot indicator when active. |
MenubarLabel | MenubarPrimitive.Label | — | Non-interactive section heading. Accepts `inset` to align with item text. |
MenubarSeparator | MenubarPrimitive.Separator | — | A thin horizontal divider between groups of items. |
MenubarShortcut | span | — | Muted, right-aligned text for displaying a keyboard shortcut hint inside an item. |
MenubarSub | MenubarPrimitive.Sub | — | Wraps a nested submenu trigger and content. |
MenubarSubTrigger | MenubarPrimitive.SubTrigger | — | Item that opens a submenu on hover or arrow key. Accepts `inset` and renders a chevron. |
MenubarSubContent | MenubarPrimitive.SubContent | — | The floating panel for a submenu. |
Accessibility
- Built on Radix Menubar, which implements the WAI-ARIA
menubarpattern with the correct roles and relationships. - Full keyboard support: ← / → move between menus, ↑ / ↓ move between items, and Esc closes the open menu.
- Type-ahead lets users jump to an item by typing its label, and focus is trapped within the open menu until it closes.
- Disabled items set
data-disabled, removing pointer events and skipping them in keyboard navigation.