Menubar

Horizontal application menu bar (File / Edit / View). Wraps Base UI Menubar; compose with MenubarMenu for each top-level menu. Open state belongs to each MenubarMenu (open/onOpenChange); the bar itself has no open-menu value.

Usage

import { Menubar, menubarAnatomy, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "@instruments/materia-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 control a menu's open state on that MenubarMenu (open/onOpenChange) rather than on the bar.

Props

Menubar

Prop	Type	Default	Description
className	`string`

MenubarCheckboxItem

Prop	Type	Description
className	`string`
render	`useRender.RenderProp<Record<string, unknown>> \| undefined`	Replace the default `<button>` row; glyph props render inside it, around `children`.
children	`string \| number \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	Text label. Use `icon` prop for icons, not children.

MenubarContent

Prop	Type	Description
className	`string`
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 behaviour. Use hidden when a child owns scrolling.

MenubarItem

Prop	Type	Description
className	`string`
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.
render	`useRender.RenderProp<Record<string, unknown>> \| undefined`	Replace the default `<button>` row (e.g. with a link); glyph props render inside it, around `children`.
children	`string \| number \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	Text label. Use `icon` prop for icons, not children.

MenubarLabel

Prop	Type	Default	Description
className	`string`
inset	`boolean`

MenubarRadioItem

Prop	Type	Description
className	`string`
render	`useRender.RenderProp<Record<string, unknown>> \| undefined`	Replace the default `<button>` row; glyph props render inside it, around `children`.
children	`string \| number \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	Text label. Use `icon` prop for icons, not children.

MenubarSeparator

Prop	Type	Default	Description
className	`string`
spacing	`"default" \| "compact"`

MenubarSubContent

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

MenubarSubTrigger

Prop	Type	Description
className	`string`
render	`useRender.RenderProp<Record<string, unknown>> \| undefined`	Replace the default `<button>` row; glyph props render inside it, around `children`.
children	`string \| number \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	Text label. Use `icon` prop for icons, not children.
inset	`boolean`
icon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`

MenubarTrigger

Prop	Type	Default	Description
className	`string`

Also exports

constmenubarAnatomy
componentMenubarGroup
componentMenubarMenu
componentMenubarPortal
componentMenubarRadioGroup
componentMenubarShortcut
componentMenubarSub

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