Menubar

Stable

A persistent row of menus — File, Edit, View — that gives desktop-class applications a complete, discoverable command vocabulary.

Source Base UI Registry

examples/menubar/demo.tsx

Installation

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/menubar.json

Usage

import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>
          New tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>New window</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Each MenubarMenu is a Dropdown Menu whose trigger lives in the bar, so every item type — checkbox, radio, submenu, destructive — is available with the same API. Once one menu is open, hovering or arrowing to a sibling trigger switches menus without another click.

Examples

Application menubar

A complete bar with shortcuts, a submenu, checkbox items in View and a radio group in Profiles.

examples/menubar/demo.tsx

Editor menus

Labels group related commands inside a long menu; icons make formatting commands recognizable at a glance.

examples/menubar/editor.tsx

Checkbox items

Toggle panels and chrome without closing the menu. Keep the state in your app so the same settings can be changed from other surfaces too.

examples/menubar/checkbox-items.tsx

Visible: Sidebar, Inspector

Disabled items and menus

Disable items that don't apply to the current selection, such as Redo with nothing to redo. Disable a whole menu with disabled on MenubarMenu when its commands are unavailable, rather than hiding it — a stable bar is easier to learn.

examples/menubar/disabled.tsx

Guidelines

When to use

In document editors, design tools, IDE-like apps and dashboards with many commands, where people expect a desktop-style menu bar.
When commands need a permanent, browsable home in addition to shortcuts and toolbars.

When not to use

On content sites and simple apps — top-level navigation belongs in a Navigation Menu.
For a handful of actions — a toolbar of Buttons or a single Dropdown Menu is lighter.
On small screens — collapse the bar into a single menu or a Command palette below md.

Conventional order

People bring expectations from every desktop app they've used. Follow the conventional order — File, Edit, View, then app-specific menus, then Window and Help — and keep labels in the bar to a single word. Inside menus, follow the Dropdown Menu content rules.

Every item needs a second path

Menubars are for discovery and teach shortcuts. Show the shortcut for every command that has one, and make sure frequent commands are also reachable from a toolbar, context menu or the Command palette.

Accessibility

Menubar implements the WAI-ARIA menubar pattern: the bar is a single tab stop with roving focus between its triggers.

Key	Behavior
`Tab`	Moves focus into the bar (to the last focused trigger) and out of it.
`←→`	Moves between triggers. With a menu open, opens the neighboring menu instead.
`EnterSpace↓`	Opens the focused menu and focuses its first item.
`↓↑`	Inside a menu, moves between items.
`→`	On a submenu trigger, opens the submenu.
`A–Z`	Typeahead to the next item starting with the typed characters.
`Esc`	Closes the menu and returns focus to its trigger in the bar.

API reference

Menubar

The bar. Accepts every prop of the Base UI Menubar.

Prop	Type	Default
`orientation` Direction of the bar and of arrow-key navigation between triggers.	`"horizontal" \| "vertical"`	`"horizontal"`
`loopFocus` Whether focus wraps from the last trigger to the first.	`boolean`	`true`
`modal` Whether the page is inert while a menu is open.	`boolean`	`true`
`disabled` Disables every menu in the bar.	`boolean`	`false`

MenubarMenu

A single menu in the bar — a DropdownMenu root. Accepts open, defaultOpen, onOpenChange and disabled.

MenubarTrigger

The bar-level button that opens its menu. Highlights while its menu is open and dims when disabled.

MenubarContent

Prop	Type	Default
`align` Alignment against the trigger.	`"start" \| "center" \| "end"`	`"start"`
`alignOffset` Aligns the menu's first item text with the trigger label.	`number`	`-4`
`sideOffset` Gap between bar and menu, in px.	`number`	`8`

Other parts

MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, MenubarLabel, MenubarSeparator, MenubarShortcut, MenubarGroup and MenubarPortal are the Dropdown Menu parts with menubar data slots, so they share every prop.