Menubar example: collision-aware animations
```jsx
// index.jsx
import { Menubar } from "radix-ui";
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>
);
```
```css
/* 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);
}
}
```
This example shows how to use data-side attributes for collision-aware animations based on placement.
Menubar overview and use case
A menubar is a visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. It adheres to the Menu Button WAI-ARIA design pattern.
Menubar component anatomy
Menubar consists of Root, Menu, Trigger, Portal, Content, Label, Item, Group, CheckboxItem, RadioGroup, RadioItem, ItemIndicator, Separator, Arrow, Sub, SubTrigger, and SubContent parts.
Menubar Root props
Menubar.Root has the following props: asChild (boolean, default false), defaultValue (string, uncontrolled), value (string, controlled), onValueChange (function), dir ("ltr" | "rtl", defaults to global DirectionProvider or LTR), loop (boolean, default false for keyboard navigation wrapping).
Menubar Menu props
Menubar.Menu has the following props: asChild (boolean, default false), value (string, optional unique value for controlled association).
Menubar Portal props
Menubar.Portal has the following props: forceMount (boolean, used to force mounting for animation control, inherited by Content and SubContent), container (HTMLElement, default document.body, specify where to portal content).
Menubar Content event handler props
Menubar.Content has event handlers: onCloseAutoFocus (function, called when focus moves to trigger after closing, preventable), onEscapeKeyDown (function, called on escape key, preventable), onPointerDownOutside (function, called on pointer event outside, preventable), onFocusOutside (function, called on focus outside, preventable), onInteractOutside (function, called on pointer or focus interaction outside, preventable).
Menubar Content other props
Menubar.Content has the following additional props: asChild (boolean, default false), loop (boolean, default false), forceMount (boolean, inherited from Portal).
Menubar Arrow props
Menubar.Arrow has the following props: asChild (boolean, default false), width (number, default 10, in pixels), height (number, default 5, in pixels). Must be rendered inside Menubar.Content.
Menubar Item props and data attributes
Menubar.Item has props: asChild (boolean, default false), disabled (boolean), onSelect (function, called on user selection, preventable to keep menubar open), textValue (string, optional for typeahead). Data attributes: [data-highlighted] present when highlighted, [data-disabled] present when disabled.
Menubar Group props
Menubar.Group has asChild prop (boolean, default false). Used to group multiple Menubar.Items.
Menubar Label props
Menubar.Label has asChild prop (boolean, default false). Not focusable using arrow keys.
Menubar CheckboxItem props and data attributes
Menubar.CheckboxItem has props: asChild (boolean, default false), checked (boolean | 'indeterminate', controlled), onCheckedChange (function), disabled (boolean), onSelect (function, preventable), textValue (string). Data attributes: [data-state] with values "checked" or "unchecked", [data-highlighted] present when highlighted, [data-disabled] present when disabled.
Menubar RadioGroup props
Menubar.RadioGroup has props: asChild (boolean, default false), value (string, selected item value), onValueChange (function, called when value changes).
Menubar RadioItem props and data attributes
Menubar.RadioItem has props: asChild (boolean, default false), value (string, required, unique value), disabled (boolean), onSelect (function, preventable), textValue (string). Data attributes: [data-state] with values "checked" or "unchecked", [data-highlighted] present when highlighted, [data-disabled] present when disabled.
Menubar ItemIndicator props and data attributes
Menubar.ItemIndicator has props: asChild (boolean, default false), forceMount (boolean, for animation control). Renders when parent CheckboxItem or RadioItem is checked. Data attributes: [data-state] with values "checked" or "unchecked".
Menubar Separator props
Menubar.Separator has asChild prop (boolean, default false). Used to visually separate items in a menubar menu.
Menubar Sub props
Menubar.Sub has props: defaultOpen (boolean, for uncontrolled), open (boolean, for controlled), onOpenChange (function, called when open state changes).
Menubar SubTrigger props and data attributes
Menubar.SubTrigger has props: asChild (boolean, default false), disabled (boolean), textValue (string). Must be rendered inside Menubar.Sub. Data attributes: [data-state] with values "open" or "closed", [data-highlighted] present when highlighted, [data-disabled] present when disabled.
Menubar SubContent positioning props
Menubar.SubContent has positioning props: sideOffset (number, default 0, distance in pixels from trigger), align ("start" | "end", default "start", direction submenu appears from anchor), alignOffset (number, default 0), avoidCollisions (boolean, default true), collisionBoundary (Element | null | Array<Element | null>, default []), collisionPadding (number | Partial<Record<Side, number>>, default 0), arrowPadding (number, default 0), sticky ("partial" | "always", default "partial"), hideWhenDetached (boolean, default false).
Menubar SubContent event handler and other props
Menubar.SubContent has event handlers: onEscapeKeyDown (function, preventable), onPointerDownOutside (function, preventable), onFocusOutside (function, preventable), onInteractOutside (function, preventable). Other props: asChild (boolean, default false), loop (boolean, default false), forceMount (boolean, inherited from Portal).
Menubar SubContent data attributes
Menubar.SubContent supports data attributes: [data-state] with values "open" or "closed", [data-side] with values "left", "right", "bottom", "top", [data-align] with values "start", "end", "center", [data-orientation] with values "vertical" or "horizontal".
Menubar SubContent CSS variables
Menubar.SubContent exposes CSS variables: --radix-menubar-content-transform-origin (transform-origin computed from content and arrow positions/offsets), --radix-menubar-content-available-width (remaining width between trigger and boundary edge), --radix-menubar-content-available-height (remaining height between trigger and boundary edge), --radix-menubar-trigger-width (width of the trigger), --radix-menubar-trigger-height (height of the trigger).
Menubar features summary
Menubar supports: controlled or uncontrolled state, submenus with configurable reading direction, items, labels, groups of items, checkable items (single or multiple), customizable side/alignment/offsets/collision handling, optional pointing arrow, fully managed focus, full keyboard navigation, and typeahead support.
Menubar typeahead support
Menubar supports typeahead navigation. By default, typeahead uses the .textContent of an item. Use the textValue prop on Item, CheckboxItem, SubTrigger, or RadioItem for typeahead when content is complex or non-textual.
Menubar focus management
Menubar uses roving tabindex to manage focus movement among menu items, providing full keyboard navigation and managed focus.
Menubar example: basic anatomy structure
```jsx
import { Menubar } from "radix-ui";
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>
);
```
This example shows the complete anatomy structure of Menubar with all available parts.
Menubar example: with submenus
```jsx
<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>
```
This example shows how to create submenus using Menubar.Sub with SubTrigger and SubContent.
Menubar example: with checkbox items
```jsx
import * as React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import { Menubar } from "radix-ui";
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>
);
};
```
This example shows how to add a checkbox item to a menubar menu with checked state management.
Menubar example: with radio items
```jsx
import * as React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import { Menubar } from "radix-ui";
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>
);
};
```
This example shows how to add radio items in a menubar menu with group value management.
Menubar example: constrain content size with CSS variables
```jsx
// index.jsx
import { Menubar } from "radix-ui";
import "./styles.css";
export default () => (
<Menubar.Root>
<Menubar.Trigger>…</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="MenubarContent" sideOffset={5}>
…
</Menubar.Content>
</Menubar.Portal>
</Menubar.Root>
);
```
```css
/* styles.css */
.MenubarContent {
width: var(--radix-menubar-trigger-width);
max-height: var(--radix-menubar-content-available-height);
}
```
This example shows how to use CSS variables to match content width to trigger width and constrain height.
Menubar example: origin-aware animations
```jsx
// index.jsx
import { Menubar } from "radix-ui";
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>
);
```
```css
/* 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);
}
}
```
This example shows how to use the transform-origin CSS variable for origin-aware animations.
Menubar not exiting fullscreen on escape from submenu
Don't exit fullscreen mode when pressing escape to dismiss from submenu in Menubar.
Menubar RelaxonCheckedChange type
Relax onCheckedChange type on Menubar.CheckboxItem.
Menubar CSS custom properties for size constraints
Expose new CSS custom properties to enable size constraints in Menubar.
Menubar matching trigger size
Position Menubar content correctly when matching trigger size.