Radix homepage
Components

Menu Bar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

import React from 'react';
import * as Menubar from '@radix-ui/react-menubar';
import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
import './styles.css';
const RADIO_ITEMS = ['Andy', 'Benoît', 'Luis'];
const CHECK_ITEMS = ['Always Show Bookmarks Bar', 'Always Show Full URLs'];
const MenubarDemo = () => {
const [checkedSelection, setCheckedSelection] = React.useState([CHECK_ITEMS[1]]);
const [radioSelection, setRadioSelection] = React.useState(RADIO_ITEMS[2]);
return (
<Menubar.Root className="MenubarRoot">
<Menubar.Menu>
<Menubar.Trigger className="MenubarTrigger">File</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="MenubarContent" align="start" sideOffset={5} alignOffset={-3}>
<Menubar.Item className="MenubarItem">
New Tab <div className="RightSlot">⌘ T</div>
</Menubar.Item>
<Menubar.Item className="MenubarItem">
New Window <div className="RightSlot">⌘ N</div>
</Menubar.Item>
<Menubar.Item className="MenubarItem" disabled>
New Incognito Window
</Menubar.Item>
<Menubar.Separator className="MenubarSeparator" />
<Menubar.Sub>
<Menubar.SubTrigger className="MenubarSubTrigger">
Share
<div className="RightSlot">
<ChevronRightIcon />
</div>
</Menubar.SubTrigger>
<Menubar.Portal>
<Menubar.SubContent className="MenubarSubContent" alignOffset={-5}>
<Menubar.Item className="MenubarItem">Email Link</Menubar.Item>
<Menubar.Item className="MenubarItem">Messages</Menubar.Item>
<Menubar.Item className="MenubarItem">Notes</Menubar.Item>
</Menubar.SubContent>
</Menubar.Portal>
</Menubar.Sub>
<Menubar.Separator className="MenubarSeparator" />
<Menubar.Item className="MenubarItem">
Print… <div className="RightSlot">⌘ P</div>
</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger className="MenubarTrigger">Edit</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="MenubarContent" align="start" sideOffset={5} alignOffset={-3}>
<Menubar.Item className="MenubarItem">
Undo <div className="RightSlot">⌘ Z</div>
</Menubar.Item>
<Menubar.Item className="MenubarItem">
Redo <div className="RightSlot">⇧ ⌘ Z</div>
</Menubar.Item>
<Menubar.Separator className="MenubarSeparator" />
<Menubar.Sub>
<Menubar.SubTrigger className="MenubarSubTrigger">
Find
<div className="RightSlot">
<ChevronRightIcon />
</div>
</Menubar.SubTrigger>
<Menubar.Portal>
<Menubar.SubContent className="MenubarSubContent" alignOffset={-5}>
<Menubar.Item className="MenubarItem">Search the web…</Menubar.Item>
<Menubar.Separator className="MenubarSeparator" />
<Menubar.Item className="MenubarItem">Find…</Menubar.Item>
<Menubar.Item className="MenubarItem">Find Next</Menubar.Item>
<Menubar.Item className="MenubarItem">Find Previous</Menubar.Item>
</Menubar.SubContent>
</Menubar.Portal>
</Menubar.Sub>
<Menubar.Separator className="MenubarSeparator" />
<Menubar.Item className="MenubarItem">Cut</Menubar.Item>
<Menubar.Item className="MenubarItem">Copy</Menubar.Item>
<Menubar.Item className="MenubarItem">Paste</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger className="MenubarTrigger">View</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="MenubarContent" align="start" sideOffset={5} alignOffset={-14} >
{CHECK_ITEMS.map((item) => (
<Menubar.CheckboxItem className="MenubarCheckboxItem inset" key={item} checked={checkedSelection.includes(item)} onCheckedChange={() => setCheckedSelection((current) => current.includes(item) ? current.filter((el) => el !== item) : current.concat(item) ) } >
<Menubar.ItemIndicator className="MenubarItemIndicator">
<CheckIcon />
</Menubar.ItemIndicator>
{item}
</Menubar.CheckboxItem>
))}
<Menubar.Separator className="MenubarSeparator" />
<Menubar.Item className="MenubarItem inset">
Reload <div className="RightSlot">⌘ R</div>
</Menubar.Item>
<Menubar.Item className="MenubarItem inset" disabled>
Force Reload <div className="RightSlot">⇧ ⌘ R</div>
</Menubar.Item>
<Menubar.Separator className="MenubarSeparator" />
<Menubar.Item className="MenubarItem inset">Toggle Fullscreen</Menubar.Item>
<Menubar.Separator className="MenubarSeparator" />
<Menubar.Item className="MenubarItem inset">Hide Sidebar</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger className="MenubarTrigger">Profiles</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="MenubarContent" align="start" sideOffset={5} alignOffset={-14} >
<Menubar.RadioGroup value={radioSelection} onValueChange={setRadioSelection}>
{RADIO_ITEMS.map((item) => (
<Menubar.RadioItem className="MenubarRadioItem inset" key={item} value={item}>
<Menubar.ItemIndicator className="MenubarItemIndicator">
<DotFilledIcon />
</Menubar.ItemIndicator>
{item}
</Menubar.RadioItem>
))}
<Menubar.Separator className="MenubarSeparator" />
<Menubar.Item className="MenubarItem inset">Edit…</Menubar.Item>
<Menubar.Separator className="MenubarSeparator" />
<Menubar.Item className="MenubarItem inset">Add Profile…</Menubar.Item>
</Menubar.RadioGroup>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
);
};
export default MenubarDemo;

Features

  • Can be controlled or uncontrolled.
  • Supports submenus with configurable reading direction.
  • Supports items, labels, groups of items.
  • Supports checkable items (single or multiple).
  • Customize side, alignment, offsets, collision handling.
  • Optionally render a pointing arrow.
  • Focus is fully managed.
  • Full keyboard navigation.
  • Typeahead support.

Install the component from your command line.

npm install @radix-ui/react-menubar

Import all parts and piece them together.

import * as Menubar from '@radix-ui/react-menubar';
export default () => (
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger />
<Menubar.Portal>
<Menubar.Content>
<Menubar.Label />
<Menubar.Item />
<Menubar.Group>
<Menubar.Item />
</Menubar.Group>
<Menubar.CheckboxItem>
<Menubar.ItemIndicator />
</Menubar.CheckboxItem>
<Menubar.RadioGroup>
<Menubar.RadioItem>
<Menubar.ItemIndicator />
</Menubar.RadioItem>
</Menubar.RadioGroup>
<Menubar.Sub>
<Menubar.SubTrigger />
<Menubar.Portal>
<Menubar.SubContent />
</Menubar.Portal>
</Menubar.Sub>
<Menubar.Separator />
<Menubar.Arrow />
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
);

Contains all the parts of a menubar.

PropTypeDefault
asChildbooleanfalse
defaultValuestringNo default value
valuestringNo default value
onValueChangefunctionNo default value
direnumNo default value
loopbooleanfalse

A top level menu item, contains a trigger with content combination.

PropTypeDefault
asChildbooleanfalse
valuestringNo default value

The button that toggles the content. By default, the Menubar.Content will position itself against the trigger.

PropTypeDefault
asChildbooleanfalse
Data AttributeValues
[data-state]"open" | "closed"
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

When used, portals the content part into the body.

PropTypeDefault
forceMountbooleanNo default value
containerHTMLElementdocument.body

The component that pops out when a menu is open.

PropTypeDefault
asChildbooleanfalse
loopbooleanfalse
onCloseAutoFocusfunctionNo default value
onEscapeKeyDownfunctionNo default value
onPointerDownOutsidefunctionNo default value
onFocusOutsidefunctionNo default value
onInteractOutsidefunctionNo default value
forceMountbooleanNo default value
sideenum"bottom"
sideOffsetnumber0
alignenum"center"
alignOffsetnumber0
avoidCollisionsbooleantrue
collisionBoundaryBoundary[]
collisionPaddingnumber | Padding0
arrowPaddingnumber0
stickyenum"partial"
hideWhenDetachedbooleanfalse
Data AttributeValues
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS VariableDescription
--radix-menubar-content-transform-originThe transform-origin computed from the content and arrow positions/offsets

An optional arrow element to render alongside a menubar menu. This can be used to help visually link the trigger with the Menubar.Content. Must be rendered inside Menubar.Content.

PropTypeDefault
asChildbooleanfalse
widthnumber10
heightnumber5

The component that contains the menubar items.

PropTypeDefault
asChildbooleanfalse
disabledbooleanNo default value
onSelectfunctionNo default value
textValuestringNo default value
Data AttributeValues
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

Used to group multiple Menubar.Items.

PropTypeDefault
asChildbooleanfalse

Used to render a label. It won't be focusable using arrow keys.

PropTypeDefault
asChildbooleanfalse

An item that can be controlled and rendered like a checkbox.

PropTypeDefault
asChildbooleanfalse
checkedbooleanNo default value
onCheckedChangefunctionNo default value
disabledbooleanNo default value
onSelectfunctionNo default value
textValuestringNo default value
Data AttributeValues
[data-state]"checked" | "unchecked"
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

Used to group multiple Menubar.RadioItems.

PropTypeDefault
asChildbooleanfalse
valuestringNo default value
onValueChangefunctionNo default value

An item that can be controlled and rendered like a radio.

PropTypeDefault
asChildbooleanfalse
value*stringNo default value
disabledbooleanNo default value
onSelectfunctionNo default value
textValuestringNo default value
Data AttributeValues
[data-state]"checked" | "unchecked"
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

Renders when the parent Menubar.CheckboxItem or Menubar.RadioItem is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

PropTypeDefault
asChildbooleanfalse
forceMountbooleanNo default value
Data AttributeValues
[data-state]"checked" | "unchecked"

Used to visually separate items in a menubar menu.

PropTypeDefault
asChildbooleanfalse

Contains all the parts of a submenu.

PropTypeDefault
defaultOpenbooleanNo default value
openbooleanNo default value
onOpenChangefunctionNo default value

An item that opens a submenu. Must be rendered inside Menubar.Sub.

PropTypeDefault
asChildbooleanfalse
disabledbooleanNo default value
textValuestringNo default value
Data AttributeValues
[data-state]"open" | "closed"
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

The component that pops out when a submenu is open. Must be rendered inside Menubar.Sub.

PropTypeDefault
asChildbooleanfalse
loopbooleanfalse
onEscapeKeyDownfunctionNo default value
onPointerDownOutsidefunctionNo default value
onFocusOutsidefunctionNo default value
onInteractOutsidefunctionNo default value
forceMountbooleanNo default value
sideOffsetnumber0
alignOffsetnumber0
avoidCollisionsbooleantrue
collisionBoundaryBoundary[]
collisionPaddingnumber | Padding0
arrowPaddingnumber0
stickyenum"partial"
hideWhenDetachedbooleanfalse
Data AttributeValues
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
[data-orientation]"vertical" | "horizontal"

You can create submenus by using Menubar.Sub in combination with its parts.

<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger></Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content>
<Menubar.Item></Menubar.Item>
<Menubar.Item></Menubar.Item>
<Menubar.Separator />
<Menubar.Sub>
<Menubar.SubTrigger>Sub menu →</Menubar.SubTrigger>
<Menubar.Portal>
<Menubar.SubContent>
<Menubar.Item>Sub menu item</Menubar.Item>
<Menubar.Item>Sub menu item</Menubar.Item>
<Menubar.Arrow />
</Menubar.SubContent>
</Menubar.Portal>
</Menubar.Sub>
<Menubar.Separator />
<Menubar.Item></Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>

You can add special styles to disabled items via the data-disabled attribute.

// index.jsx
import * as Menubar from '@radix-ui/react-menubar';
import './styles.css';
export default () => (
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger></Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content>
<Menubar.Item className="MenubarItem" disabled>
</Menubar.Item>
<Menubar.Item className="MenubarItem"></Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
);
/* styles.css */
.MenubarItem[data-disabled] {
color: gainsboro;
}

Use the Separator part to add a separator between items.

<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger></Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content>
<Menubar.Item></Menubar.Item>
<Menubar.Separator />
<Menubar.Item></Menubar.Item>
<Menubar.Separator />
<Menubar.Item></Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>

Use the Label part to help label a section.

<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger></Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content>
<Menubar.Label>Label</Menubar.Label>
<Menubar.Item></Menubar.Item>
<Menubar.Item></Menubar.Item>
<Menubar.Item></Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>

Use the CheckboxItem part to add an item that can be checked.

import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as Menubar from '@radix-ui/react-menubar';
export default () => {
const [checked, setChecked] = React.useState(true);
return (
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger></Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content>
<Menubar.Item></Menubar.Item>
<Menubar.Item></Menubar.Item>
<Menubar.Separator />
<Menubar.CheckboxItem checked={checked} onCheckedChange={setChecked} >
<Menubar.ItemIndicator>
<CheckIcon />
</Menubar.ItemIndicator>
Checkbox item
</Menubar.CheckboxItem>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
);
};

Use the RadioGroup and RadioItem parts to add an item that can be checked amongst others.

import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as Menubar from '@radix-ui/react-menubar';
export default () => {
const [color, setColor] = React.useState('blue');
return (
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger></Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content>
<Menubar.RadioGroup value={color} onValueChange={setColor}>
<Menubar.RadioItem value="red">
<Menubar.ItemIndicator>
<CheckIcon />
</Menubar.ItemIndicator>
Red
</Menubar.RadioItem>
<Menubar.RadioItem value="blue">
<Menubar.ItemIndicator>
<CheckIcon />
</Menubar.ItemIndicator>
Blue
</Menubar.RadioItem>
</Menubar.RadioGroup>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
);
};

You can add extra decorative elements in the Item parts, such as images.

import * as Menubar from '@radix-ui/react-menubar';
export default () => (
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger></Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content>
<Menubar.Item>
<img src="" />
Adolfo Hess
</Menubar.Item>
<Menubar.Item>
<img src="" />
Miyah Myles
</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
);

We expose a CSS custom property --radix-menubar-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

// index.jsx
import * as Menubar from '@radix-ui/react-menubar';
import './styles.css';
export default () => (
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger></Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="MenubarContent"></Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
);
/* styles.css */
.MenubarContent {
transform-origin: var(--radix-menubar-content-transform-origin);
animation: scaleIn 0.5s ease-out;
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}

We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

// index.jsx
import * as Menubar from '@radix-ui/react-menubar';
import './styles.css';
export default () => (
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger></Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="MenubarContent"></Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
);
/* styles.css */
.MenubarContent {
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.MenubarContent[data-side='top'] {
animation-name: slideUp;
}
.MenubarContent[data-side='bottom'] {
animation-name: slideDown;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

Adheres to the Menu Button WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.

KeyDescription
SpaceWhen focus is on Menubar.Trigger, opens the menubar and focuses the first item.
When focus is on an item, activates the focused item.
EnterWhen focus is on Menubar.Trigger, opens the associated menu.
When focus is on an item, activates the focused item.
ArrowDownWhen focus is on Menubar.Trigger, opens the associated menu.
When focus is on an item, moves focus to the next item.
ArrowUpWhen focus is on an item, moves focus to the previous item.
ArrowRightArrowLeftWhen focus is on a Menubar.Trigger, moves focus to the next or previous item.
When focus is on a Menubar.SubTrigger, opens or closes the submenu depending on reading direction.
When focus is within a Menubar.Content, opens the next menu in the menubar.
EscCloses the currently open menu and moves focus to its Menubar.Trigger.