Menubar

Horizontal application menu bar (File / Edit / View). Wraps Radix Menubar Root; compose with MenubarMenu for each top-level menu. Which menu is open is uncontrolled by default; pass value/onValueChange to control it.

Usage

import { Menubar, menubarAnatomy, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "@desk/ui/components/menubar";

Best practices

Reserve Menubar for a persistent desktop app menu bar; a single click menu is DropdownMenu, a right-click menu is ContextMenu.
Give each top-level label its own MenubarMenu, and leave which menu is open uncontrolled unless you must drive it via value.

Props

MenubarCheckboxItem

Prop	Type	Default	Description
children	`string \| number \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`		Text label. Use `icon` prop for icons, not children. When using asChild, pass a single React element.

MenubarContent

Prop	Type	Description
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
itemRadius	`"rounded" \| "square" \| "full"`	Border radius for menu items. When "full", items become pill-shaped.
surface	`MenuSurface`	Surface density. Compact maps to the 16px-radius, 4px-padding menu surface.
contentWidth	`MenuContentWidth`	Named content widths from the design system.
overflow	`MenuOverflow`	Outer content overflow behavior. Use hidden when a child owns scrolling.

MenubarItem

Prop	Type	Description
inset	`boolean`
tone	`"neutral" \| "danger"`
avatar	`React.ReactNode`
dot	`boolean \| "neutral" \| "brand" \| "danger" \| "warning" \| "success" \| "info"`	Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a {@link Tone} to tint it.
icon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`
suffixIcon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`
kbd	`string[]`
suffix	`React.ReactNode`
active	`boolean`	Whether the item is in an active/selected state
activeIndicator	`"none" \| "dot" \| "check"`	Visual indicator for active state. "dot" shows grey dot normally, green when active. "check" shows green checkmark only when active.
children	`string \| number \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	Text label. Use `icon` prop for icons, not children. When using asChild, pass a single React element.

MenubarLabel

Prop	Type	Default	Description
inset	`boolean`

MenubarRadioItem

Prop	Type	Default	Description
children	`string \| number \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`		Text label. Use `icon` prop for icons, not children. When using asChild, pass a single React element.

MenubarSeparator

Prop	Type	Default	Description
spacing	`MenubarSeparatorSpacing`

MenubarSubContent

Prop	Type	Default	Description
className	`string`
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
children	`ReactNode`

MenubarSubTrigger

Prop	Type	Description
inset	`boolean`
icon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`
children	`string \| number \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	Text label. Use `icon` prop for icons, not children. When using asChild, pass a single React element.

Also exports

componentMenubar
constmenubarAnatomy
componentMenubarGroup
componentMenubarMenu
componentMenubarPortal
componentMenubarRadioGroup
componentMenubarShortcut
componentMenubarSub
componentMenubarTrigger

Anatomy

Menubar

menubar

Horizontal application menu bar (File / Edit / View)

MenubarMenu

menubar-menu

A single top-level menu

MenubarTrigger

menubar-trigger

Button opening a top-level menu

MenubarContent

menubar-content

Menu content container

MenubarItem

menubar-item

Menu item

MenubarCheckboxItem

menubar-checkbox-item

Toggleable item

MenubarRadioGroup

menubar-radio-group

Exclusive selection group

MenubarRadioItem

menubar-radio-item

Radio option

MenubarLabel

menubar-label

Section label

MenubarSeparator

menubar-separator

Visual divider

MenubarSub

menubar-sub

Nested submenu

MenubarSubTrigger

menubar-sub-trigger

Opens nested menu

MenubarSubContent

menubar-sub-content

Nested menu container

MenubarShortcut

menubar-shortcut

Keyboard shortcut

Composition

Builds on

Icon, MenuItem