Menubar

Menubar wraps the menubar primitive of the chosen base and groups several menus into one keyboard-navigable bar. Each MenubarMenu holds a MenubarTrigger and a MenubarContent popup. Inside the content, compose MenubarItem, MenubarCheckboxItem, MenubarRadioGroup with MenubarRadioItem, MenubarLabel, MenubarGroup, MenubarSeparator, MenubarShortcut, and nested submenus built from MenubarSub, MenubarSubTrigger and MenubarSubContent.

Most parts reuse the Dropdown Menu components with menubar styling. Use Menubar for persistent, app-level command menus; use Dropdown Menu for a single menu opened from one button.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/menubar

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add menubar

Manual

Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react @phosphor-icons/react

Add the pieces it builds on: Dropdown Menu.
Copy the source into components/ui/menubar.tsx:

Update the import paths to match your project.

Usage

import { Menubar, MenubarMenu, MenubarGroup, MenubarPortal, MenubarTrigger, MenubarContent, MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarLabel, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubTrigger, MenubarSubContent }

<div

Each MenubarMenu accepts the menu root props, such as open, defaultOpen and onOpenChange. MenubarItem also accepts variant="destructive" and inset. Checkbox items use checked/defaultChecked, and radio groups use value/defaultValue. Pass disabled on Menubar to disable the whole bar, or on an individual item.

MenubarContent defaults to align="start", alignOffset={-4} and sideOffset={8}. MenubarShortcut accepts mod to prepend the platform modifier key.

Examples

By default

The File menu opened on first render with defaultOpen, including a Share submenu.

Disabled

A menubar with disabled set, so none of its menus open.

API Reference

Menubar

The bar that contains the menus and manages keyboard navigation between them.

Also accepts the props of the primitive part it wraps.

MenubarMenu

Groups one trigger with its popup and holds that menu's open state.

Also accepts the props of React.ComponentProps<typeof DropdownMenu>.

MenubarGroup

Groups related items inside a menu.

Also accepts the props of React.ComponentProps<typeof DropdownMenuGroup>.

MenubarPortal

Renders menu content into a portal outside the bar.

Also accepts the props of React.ComponentProps<typeof DropdownMenuPortal>.

MenubarTrigger

The button in the bar that opens its menu.

Also accepts the props of React.ComponentProps<typeof DropdownMenuTrigger>.

MenubarContent

The positioned popup that holds a menu's items.

Also accepts the props of React.ComponentProps<typeof DropdownMenuContent>.

MenubarItem

A single command in a menu.

Also accepts the props of React.ComponentProps<typeof DropdownMenuItem>.

MenubarCheckboxItem

An item that toggles on and off, with a leading check indicator.

Prop	Type	Default	Description
`inset`	`boolean`	-	Sets `data-inset` on the item for inset alignment.

Also accepts the props of the primitive part it wraps.

MenubarRadioGroup

Groups radio items so only one can be selected.

Also accepts the props of React.ComponentProps<typeof DropdownMenuRadioGroup>.

MenubarRadioItem

One option in a radio group, with a leading check indicator when selected.

Prop	Type	Default	Description
`inset`	`boolean`	-	Sets `data-inset` on the item for inset alignment.

Also accepts the props of the primitive part it wraps.

MenubarLabel

A non-interactive heading for a section of items.

Prop	Type	Default	Description
`inset`	`boolean`	-	Indents the label to align with items that show a leading icon or indicator.

Also accepts the props of React.ComponentProps<typeof DropdownMenuLabel>.

MenubarSeparator

A thin divider between groups of items.

Also accepts the props of React.ComponentProps<typeof DropdownMenuSeparator>.

MenubarShortcut

A trailing keyboard shortcut hint inside an item.

Also accepts the props of React.ComponentProps<typeof DropdownMenuShortcut>.

MenubarSub

The root of a nested submenu.

Also accepts the props of React.ComponentProps<typeof DropdownMenuSub>.

MenubarSubTrigger

The item that opens a submenu.

Prop	Type	Default	Description
`inset`	`boolean`	-	Indents the trigger to align with items that show a leading icon or indicator.

Also accepts the props of React.ComponentProps<typeof DropdownMenuSubTrigger>.

MenubarSubContent

The popup that holds a submenu's items.

Also accepts the props of React.ComponentProps<typeof DropdownMenuSubContent>.

Accessibility

The bar has the menubar role and each trigger has the menuitem role, with aria-expanded reflecting its menu's state.
Popups use the menu role; items use menuitem, menuitemcheckbox or menuitemradio, with aria-checked on checkbox and radio items.
While a menu is open, ArrowLeft and ArrowRight move to the adjacent menu. ArrowRight on a submenu trigger opens the submenu.
Escape closes the open menu and returns focus to its trigger.
Disabled items expose aria-disabled="true".

Notes

Styling hooks: each part sets a data-slot such as menubar, menubar-trigger, menubar-content, menubar-item and menubar-sub-trigger. Items expose data-variant and data-inset.
Checkbox and radio items always reserve leading space for their indicator.
MenubarShortcut is hidden below the md breakpoint.
Uses the popover, accent, destructive and border colors.