Menubar is the File / Edit / View pattern. Each MenubarMenu holds a trigger and a menu of items; arrow keys move across and within menus.
When to use
Use Menubar in dense desktop tools such as document editors or back-office consoles where users expect File, Edit, and View style menus. For a single action menu, use DropdownMenu. For primary site navigation, use Sidebar or SlideoutMenu.
Examples
Outline triggers (Arabic)
Props
Props declared by Menubar. Native attributes of the underlying element pass through.
<Menubar>
| Prop | Type | Default | Description |
|---|
value | string | – | |
defaultValue | string | – | |
onValueChange | (value: string) => void | – | |
loop | boolean | – | |
dir | Direction | – | |
asChild | boolean | – | |
<MenubarMenu>
| Prop | Type | Default | Description |
|---|
__scopeMenubar | _radix_ui_react_context.Scope | – | |
value | string | – | |
children | ReactNode | – | |
<MenubarTrigger>
| Prop | Type | Default | Description |
|---|
variant | "outline" | "default" | – | |
asChild | boolean | – | |
<MenubarContent>
| Prop | Type | Default | Description |
|---|
size | "sm" | "md" | – | |
forceMount | true | – | Used to force mounting when more control is needed. Useful when
controlling animation with React animation libraries. |
onCloseAutoFocus | (event: Event) => void | – | Event handler called when auto-focusing on close.
Can be prevented. |
loop | boolean | false | Whether keyboard navigation should loop around |
onEscapeKeyDown | (event: KeyboardEvent) => void | – | |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | – | |
onFocusOutside | (event: FocusOutsideEvent) => void | – | |
onInteractOutside | (event: PointerDownOutsideEvent | FocusOutsideEvent) => void | – | |
side | "top" | "right" | "bottom" | "left" | – | |
sideOffset | number | – | |
align | "center" | "start" | "end" | – | |
alignOffset | number | – | |
arrowPadding | number | – | |
avoidCollisions | boolean | – | |
collisionBoundary | Element | Element[] | – | |
collisionPadding | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | – | |
sticky | "always" | "partial" | – | |
hideWhenDetached | boolean | – | |
updatePositionStrategy | "always" | "optimized" | – | |
asChild | boolean | – | |
<MenubarItem>
| Prop | Type | Default | Description |
|---|
destructive | boolean | – | Style as a destructive action (red text, red hover). |
startIcon | react.ReactNode | – | Icon rendered before the label. Sized to 1em. |
shortcut | react.ReactNode | – | Trailing text shown muted, e.g. a keyboard shortcut hint ("⌘K"). |
onSelect | (event: Event) => void | – | |
disabled | boolean | – | |
textValue | string | – | |
asChild | boolean | – | |
<MenubarCheckboxItem>
| Prop | Type | Default | Description |
|---|
onSelect | (event: Event) => void | – | |
disabled | boolean | – | |
textValue | string | – | |
checked | CheckedState | – | |
onCheckedChange | (checked: boolean) => void | – | |
asChild | boolean | – | |
<MenubarRadioGroup>
| Prop | Type | Default | Description |
|---|
value | string | – | |
onValueChange | (value: string) => void | – | |
asChild | boolean | – | |
<MenubarRadioItem>
| Prop | Type | Default | Description |
|---|
onSelect | (event: Event) => void | – | |
disabled | boolean | – | |
textValue | string | – | |
valuerequired | string | – | |
asChild | boolean | – | |
<MenubarLabel>
| Prop | Type | Default | Description |
|---|
asChild | boolean | – | |
<MenubarSeparator>
| Prop | Type | Default | Description |
|---|
asChild | boolean | – | |
<MenubarGroup>
| Prop | Type | Default | Description |
|---|
asChild | boolean | – | |
<MenubarSub>
| Prop | Type | Default | Description |
|---|
children | ReactNode | – | |
open | boolean | – | |
defaultOpen | boolean | – | |
onOpenChange | (open: boolean) => void | – | |
<MenubarSubTrigger>
| Prop | Type | Default | Description |
|---|
startIcon | react.ReactNode | – | |
disabled | boolean | – | |
textValue | string | – | |
asChild | boolean | – | |
<MenubarSubContent>
| Prop | Type | Default | Description |
|---|
size | "sm" | "md" | – | |
loop | boolean | false | Whether keyboard navigation should loop around |
onEscapeKeyDown | (event: KeyboardEvent) => void | – | |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | – | |
onFocusOutside | (event: FocusOutsideEvent) => void | – | |
onInteractOutside | (event: PointerDownOutsideEvent | FocusOutsideEvent) => void | – | |
forceMount | true | – | Used to force mounting when more control is needed. Useful when
controlling animation with React animation libraries. |
align | AlignSubContent | – | Controls the direction the subcontent appears from its anchor menu item
Default: start |
sideOffset | number | – | |
alignOffset | number | – | |
arrowPadding | number | – | |
avoidCollisions | boolean | – | |
collisionBoundary | Element | Element[] | – | |
collisionPadding | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | – | |
sticky | "always" | "partial" | – | |
hideWhenDetached | boolean | – | |
updatePositionStrategy | "always" | "optimized" | – | |
asChild | boolean | – | |
Accessibility
The bar renders role="menubar" with menu triggers. The left and right arrow keys move between menus, the up and down keys move within one, and Escape closes the open menu. Typing jumps to a matching item.
Checkbox and radio items expose aria-checked. The arrow keys follow the reading direction in RTL.