Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.
Menu Bar
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
import { createSignal } from "solid-js";
import { Menubar } from "@radix-solid/primitives";
import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-solid/icons";
import styles from "./styles.module.css";
const RADIO_ITEMS = ["Andy", "Benoît", "Luis"];
const CHECK_ITEMS = ["Always Show Bookmarks Bar", "Always Show Full URLs"];
const MenubarDemo = () => {
const [checkedSelection, setCheckedSelection] = createSignal([CHECK_ITEMS[1]]);
const [radioSelection, setRadioSelection] = createSignal(RADIO_ITEMS[2]);
return <Menubar.Root class={styles.Root}>
<Menubar.Menu>
<Menubar.Trigger class={styles.Trigger}>File</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content class={styles.Content} align="start" sideOffset={5} alignOffset={-3}>
<Menubar.Item class={styles.Item}>
New Tab <div class={styles.RightSlot}>⌘ T</div>
</Menubar.Item>
<Menubar.Item class={styles.Item}>
New Window <div class={styles.RightSlot}>⌘ N</div>
</Menubar.Item>
<Menubar.Item class={styles.Item} disabled>
New Incognito Window
</Menubar.Item>
<Menubar.Separator class={styles.Separator} />
<Menubar.Sub>
<Menubar.SubTrigger class={styles.SubTrigger}>
Share
<div class={styles.RightSlot}>
<ChevronRightIcon />
</div>
</Menubar.SubTrigger>
<Menubar.Portal>
<Menubar.SubContent class={styles.SubContent} alignOffset={-5}>
<Menubar.Item class={styles.Item}>
Email Link
</Menubar.Item>
<Menubar.Item class={styles.Item}>Messages</Menubar.Item>
<Menubar.Item class={styles.Item}>Notes</Menubar.Item>
</Menubar.SubContent>
</Menubar.Portal>
</Menubar.Sub>
<Menubar.Separator class={styles.Separator} />
<Menubar.Item class={styles.Item}>
Print… <div class={styles.RightSlot}>⌘ P</div>
</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger class={styles.Trigger}>Edit</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content class={styles.Content} align="start" sideOffset={5} alignOffset={-3}>
<Menubar.Item class={styles.Item}>
Undo <div class={styles.RightSlot}>⌘ Z</div>
</Menubar.Item>
<Menubar.Item class={styles.Item}>
Redo <div class={styles.RightSlot}>⇧ ⌘ Z</div>
</Menubar.Item>
<Menubar.Separator class={styles.Separator} />
<Menubar.Sub>
<Menubar.SubTrigger class={styles.SubTrigger}>
Find
<div class={styles.RightSlot}>
<ChevronRightIcon />
</div>
</Menubar.SubTrigger>
<Menubar.Portal>
<Menubar.SubContent class={styles.SubContent} alignOffset={-5}>
<Menubar.Item class={styles.Item}>
Search the web…
</Menubar.Item>
<Menubar.Separator class={styles.Separator} />
<Menubar.Item class={styles.Item}>Find…</Menubar.Item>
<Menubar.Item class={styles.Item}>Find Next</Menubar.Item>
<Menubar.Item class={styles.Item}>
Find Previous
</Menubar.Item>
</Menubar.SubContent>
</Menubar.Portal>
</Menubar.Sub>
<Menubar.Separator class={styles.Separator} />
<Menubar.Item class={styles.Item}>Cut</Menubar.Item>
<Menubar.Item class={styles.Item}>Copy</Menubar.Item>
<Menubar.Item class={styles.Item}>Paste</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger class={styles.Trigger}>View</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content class={styles.Content} align="start" sideOffset={5} alignOffset={-14}>
{CHECK_ITEMS.map(item => <Menubar.CheckboxItem class={`${styles.CheckboxItem} inset`} checked={checkedSelection().includes(item)} onCheckedChange={() => setCheckedSelection(current => current.includes(item) ? current.filter(el => el !== item) : current.concat(item))}>
<Menubar.ItemIndicator class={styles.ItemIndicator}>
<CheckIcon />
</Menubar.ItemIndicator>
{item}
</Menubar.CheckboxItem>)}
<Menubar.Separator class={styles.Separator} />
<Menubar.Item class={`${styles.Item} inset`}>
Reload <div class={styles.RightSlot}>⌘ R</div>
</Menubar.Item>
<Menubar.Item class={`${styles.Item} inset`} disabled>
Force Reload <div class={styles.RightSlot}>⇧ ⌘ R</div>
</Menubar.Item>
<Menubar.Separator class={styles.Separator} />
<Menubar.Item class={`${styles.Item} inset`}>
Toggle Fullscreen
</Menubar.Item>
<Menubar.Separator class={styles.Separator} />
<Menubar.Item class={`${styles.Item} inset`}>
Hide Sidebar
</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger class={styles.Trigger}>Profiles</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content class={styles.Content} align="start" sideOffset={5} alignOffset={-14}>
<Menubar.RadioGroup value={radioSelection()} onValueChange={setRadioSelection}>
{RADIO_ITEMS.map(item => <Menubar.RadioItem class={`${styles.RadioItem} inset`} value={item}>
<Menubar.ItemIndicator class={styles.ItemIndicator}>
<DotFilledIcon />
</Menubar.ItemIndicator>
{item}
</Menubar.RadioItem>)}
<Menubar.Separator class={styles.Separator} />
<Menubar.Item class={`${styles.Item} inset`}>
Edit…
</Menubar.Item>
<Menubar.Separator class={styles.Separator} />
<Menubar.Item class={`${styles.Item} 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.
Anatomy
Import all parts and piece them together.
import { Menubar } from "@radix-solid/primitives";
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 value="item">
<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>;API Reference
Root
Contains all the parts of a menubar.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
defaultValueThe value of the menu that should be open when initially rendered. Use when you do not need to control the value state. | string | — |
valueThe controlled value of the menu to open. Should be used in conjunction with onValueChange. | string | — |
onValueChangeEvent handler called when the value changes. | function | — |
dirThe reading direction. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode. | enum | — |
loopWhen true, keyboard navigation will loop from last item to first, and vice versa. | boolean | false |
Menu
A top level menu item, contains a trigger with content combination.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
valueA unique value that associates the item with an active value when the navigation menu is controlled. This prop is managed automatically when uncontrolled. | string | — |
Trigger
The button that toggles the content. By default, the Menubar.Content will position itself against the trigger.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
| Data attribute | Values |
|---|---|
[data-state] | "open" | "closed" |
[data-highlighted] | Present when highlighted |
[data-disabled] | Present when disabled |
Portal
When used, portals the content part into the body.
| Prop | Type | Default |
|---|---|---|
forceMountUsed to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries. If used on this part, it will be inherited by Menubar.Content and Menubar.SubContent respectively. | boolean | — |
containerSpecify a container element to portal the content into. | HTMLElement | document.body |
Content
The component that pops out when a menu is open.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
loopWhen true, keyboard navigation will loop from last item to first, and vice versa. | boolean | false |
onCloseAutoFocusEvent handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault. | function | — |
onEscapeKeyDownEvent handler called when the escape key is down. It can be prevented by calling event.preventDefault | function | — |
onPointerDownOutsideEvent handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault. | function | — |
onFocusOutsideEvent handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault. | function | — |
onInteractOutsideEvent handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault. | function | — |
forceMountUsed to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries. It inherits from Menubar.Portal. | boolean | — |
sideThe preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. | enum | "bottom" |
sideOffsetThe distance in pixels from the trigger. | number | 0 |
alignThe preferred alignment against the trigger. May change when collisions occur. | enum | "center" |
alignOffsetAn offset in pixels from the "start" or "end" alignment options. | number | 0 |
avoidCollisionsWhen true, overrides the side andalign preferences to prevent collisions with boundary edges. | boolean | true |
collisionBoundaryThe element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check. | Boundary | [] |
collisionPaddingThe distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. | number | Padding | 0 |
arrowPaddingThe padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. | number | 0 |
stickyThe sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. | enum | "partial" |
hideWhenDetachedWhether to hide the content when the trigger becomes fully occluded. | boolean | false |
| Data attribute | Values |
|---|---|
[data-state] | "open" | "closed" |
[data-side] | "left" | "right" | "bottom" | "top" |
[data-align] | "start" | "end" | "center" |
| CSS Variable | Description |
|---|---|
--radix-menubar-content-transform-origin | The transform-origin computed from the content and arrow positions/offsets |
--radix-menubar-content-available-width | The remaining width between the trigger and the boundary edge |
--radix-menubar-content-available-height | The remaining height between the trigger and the boundary edge |
--radix-menubar-trigger-width | The width of the trigger |
--radix-menubar-trigger-height | The height of the trigger |
Arrow
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.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
widthThe width of the arrow in pixels. | number | 10 |
heightThe height of the arrow in pixels. | number | 5 |
Item
The component that contains the menubar items.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
disabledWhen true, prevents the user from interacting with the item. | boolean | — |
onSelectEvent handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the menubar from closing when selecting that item. | function | — |
textValueOptional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside. | string | — |
| Data attribute | Values |
|---|---|
[data-highlighted] | Present when highlighted |
[data-disabled] | Present when disabled |
Group
Used to group multiple Menubar.Items.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
Label
Used to render a label. It won't be focusable using arrow keys.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
CheckboxItem
An item that can be controlled and rendered like a checkbox.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
checkedThe controlled checked state of the item. Must be used in conjunction with onCheckedChange. | boolean | 'indeterminate' | — |
onCheckedChangeEvent handler called when the checked state changes. | function | — |
disabledWhen true, prevents the user from interacting with the item. | boolean | — |
onSelectEvent handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the menubar from closing when selecting that item. | function | — |
textValueOptional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside. | string | — |
| Data attribute | Values |
|---|---|
[data-state] | "checked" | "unchecked" |
[data-highlighted] | Present when highlighted |
[data-disabled] | Present when disabled |
RadioGroup
Used to group multiple Menubar.RadioItems.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
valueThe value of the selected item in the group. | string | — |
onValueChangeEvent handler called when the value changes. | function | — |
RadioItem
An item that can be controlled and rendered like a radio.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
value*The unique value of the item. | string | — |
disabledWhen true, prevents the user from interacting with the item. | boolean | — |
onSelectEvent handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the menubar from closing when selecting that item. | function | — |
textValueOptional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside. | string | — |
| Data attribute | Values |
|---|---|
[data-state] | "checked" | "unchecked" |
[data-highlighted] | Present when highlighted |
[data-disabled] | Present when disabled |
ItemIndicator
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.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
forceMountUsed to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries. | boolean | — |
| Data attribute | Values |
|---|---|
[data-state] | "checked" | "unchecked" |
Separator
Used to visually separate items in a menubar menu.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
Sub
Contains all the parts of a submenu.
| Prop | Type | Default |
|---|---|---|
defaultOpenThe open state of the submenu when it is initially rendered. Use when you do not need to control its open state. | boolean | — |
openThe controlled open state of the submenu. Must be used in conjunction with onOpenChange. | boolean | — |
onOpenChangeEvent handler called when the open state of the submenu changes. | function | — |
SubTrigger
An item that opens a submenu. Must be rendered inside Menubar.Sub.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
disabledWhen true, prevents the user from interacting with the item. | boolean | — |
textValueOptional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside. | string | — |
| Data attribute | Values |
|---|---|
[data-state] | "open" | "closed" |
[data-highlighted] | Present when highlighted |
[data-disabled] | Present when disabled |
SubContent
The component that pops out when a submenu is open. Must be rendered inside Menubar.Sub.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
loopWhen true, keyboard navigation will loop from last item to first, and vice versa. | boolean | false |
onEscapeKeyDownEvent handler called when the escape key is down. It can be prevented by calling event.preventDefault | function | — |
onPointerDownOutsideEvent handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault. | function | — |
onFocusOutsideEvent handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault. | function | — |
onInteractOutsideEvent handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault. | function | — |
forceMountUsed to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries. It inherits from Menubar.Portal. | boolean | — |
sideOffsetThe distance in pixels from the trigger. | number | 0 |
alignThe direction the submenu appears from its anchor item. May change when collisions occur. | enum | "start" |
alignOffsetAn offset in pixels from the "start" or "end" alignment options. | number | 0 |
avoidCollisionsWhen true, overrides the side andalign preferences to prevent collisions with boundary edges. | boolean | true |
collisionBoundaryThe element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check. | Boundary | [] |
collisionPaddingThe distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. | number | Padding | 0 |
arrowPaddingThe padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. | number | 0 |
stickyThe sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. | enum | "partial" |
hideWhenDetachedWhether to hide the content when the trigger becomes fully occluded. | boolean | false |
| Data attribute | Values |
|---|---|
[data-state] | "open" | "closed" |
[data-side] | "left" | "right" | "bottom" | "top" |
[data-align] | "start" | "end" | "center" |
[data-orientation] | "vertical" | "horizontal" |
| CSS Variable | Description |
|---|---|
--radix-menubar-content-transform-origin | The transform-origin computed from the content and arrow positions/offsets |
--radix-menubar-content-available-width | The remaining width between the trigger and the boundary edge |
--radix-menubar-content-available-height | The remaining height between the trigger and the boundary edge |
--radix-menubar-trigger-width | The width of the trigger |
--radix-menubar-trigger-height | The height of the trigger |
Examples
With submenus
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>With disabled items
You can add special styles to disabled items via the data-disabled attribute.
// index.tsx
import { Menubar } from "@radix-solid/primitives";
import "./styles.css";
export default () => <Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger>…</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content>
<Menubar.Item class="MenubarItem" disabled>
…
</Menubar.Item>
<Menubar.Item class="MenubarItem">…</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>;/* styles.css */
.MenubarItem[data-disabled] {
color: gainsboro;
}With separators
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>With labels
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>With checkbox items
Use the CheckboxItem part to add an item that can be checked.
import { createSignal } from "solid-js";
import { CheckIcon } from "@radix-solid/icons";
import { Menubar } from "@radix-solid/primitives";
export default () => {
const [checked, setChecked] = createSignal(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>;
};With radio items
Use the RadioGroup and RadioItem parts to add an item that can be checked amongst others.
import { createSignal } from "solid-js";
import { CheckIcon } from "@radix-solid/icons";
import { Menubar } from "@radix-solid/primitives";
export default () => {
const [color, setColor] = createSignal("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>;
};With complex items
You can add extra decorative elements in the Item parts, such as images.
import { Menubar } from "@radix-solid/primitives";
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>;Constrain the content/sub-content size
You may want to constrain the width of the content (or sub-content) so that it matches the trigger (or sub-trigger) width. You may also want to constrain its height to not exceed the viewport.
We expose several CSS custom properties such as --radix-menubar-trigger-width and --radix-menubar-content-available-height to support this. Use them to constrain the content dimensions.
// index.tsx
import { Menubar } from "@radix-solid/primitives";
import "./styles.css";
export default () => <Menubar.Root>
<Menubar.Trigger>…</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content class="MenubarContent" sideOffset={5}>
…
</Menubar.Content>
</Menubar.Portal>
</Menubar.Root>;/* styles.css */
.MenubarContent {
width: var(--radix-menubar-trigger-width);
max-height: var(--radix-menubar-content-available-height);
}Origin-aware animations
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.tsx
import { Menubar } from "@radix-solid/primitives";
import "./styles.css";
export default () => <Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger>…</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content class="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);
}
}Collision-aware animations
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.tsx
import { Menubar } from "@radix-solid/primitives";
import "./styles.css";
export default () => <Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger>…</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content class="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);
}
}Accessibility
Adheres to the Menu Button WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.
Keyboard Interactions
| Key | Description |
|---|---|
Space | When focus is on Menubar.Trigger, opens the menubar and focuses the first item.When focus is on an item, activates the focused item. |
Enter | When focus is on Menubar.Trigger, opens the associated menu.When focus is on an item, activates the focused item. |
ArrowDown | When focus is on Menubar.Trigger, opens the associated menu.When focus is on an item, moves focus to the next item. |
ArrowUp | When focus is on an item, moves focus to the previous item. |
ArrowRightArrowLeft | When 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. |
Esc | Closes the currently open menu and moves focus to its Menubar.Trigger. |