Menubar

Install

pnpm dlx shadcn@latest add @vegastack/menubar

Usage

import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  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>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>Share</MenubarItem>
        <MenubarItem>Print</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>;

Anatomy

Examples

Composition

Menubar is the bar; each MenubarMenu is one trigger plus its popup. Only the bar and the two Menu-backed rows — MenubarCheckboxItem and MenubarRadioItem — are menubar's own; every other part is a thin wrapper over the matching dropdown-menu part, which is why a fix there lands here too.

Menubar
├── MenubarMenu
│   ├── MenubarTrigger
│   └── MenubarContent
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   ├── MenubarItem
│       │   └── MenubarItem
│       ├── MenubarSeparator
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   └── MenubarCheckboxItem
│       ├── MenubarSeparator
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   └── MenubarRadioGroup
│       │       ├── MenubarRadioItem
│       │       └── MenubarRadioItem
│       └── MenubarSub
│           ├── MenubarSubTrigger
│           └── MenubarSubContent
│               └── MenubarGroup
│                   ├── MenubarLabel
│                   └── MenubarItem
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        └── MenubarGroup
            ├── MenubarLabel
            └── MenubarItem

Checkbox

MenubarCheckboxItem renders role="menuitemcheckbox" with aria-checked and reserves the inline-start indicator column. Rows that sit beside it take inset, so their labels line up with the checked ones instead of with the indicator.

Radio

MenubarRadioGroup owns the value and each MenubarRadioItem is a role="menuitemradio"; selecting one clears the rest of its group.

Submenu

MenubarSub, MenubarSubTrigger and MenubarSubContent nest a second popup, which opens on hover and on →. They wrap dropdown-menu's submenu parts, so the chevron, the positioning and the theme scope are the same ones.

With Icons

A leading lucide-react icon is sized by the row itself, so pass a className rather than a size prop. variant="destructive" tints the row, its icon and its focus wash.

RTL

The bar's own layout is flex with logical padding, and every row inherits dropdown-menu's logical spacing, so a DirectionProvider set to rtl mirrors the bar, the popups and the submenu chevron.

API Reference

Menubar, MenubarMenu, MenubarTrigger, MenubarGroup, MenubarLabel, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent and MenubarPortal add no props of their own — each accepts everything the Base UI part, or the dropdown-menu part it wraps, accepts.

Accessibility

• Renders Base UI's Menubar over Base UI's Menu: the bar is a role="menubar" whose triggers move under ←/→, and each popup is a role="menu" of menuitem, menuitemcheckbox and menuitemradio rows with type-ahead, ↑/↓ and Esc.
• With one menu open, moving along the bar opens the next menu rather than merely focusing its trigger — the behaviour a desktop menubar has, and what the APG pattern specifies.
• Menubar opens no portal of its own: MenubarContent, MenubarSubContent and MenubarPortal wrap the dropdown-menu parts that carry the theme scope across the portal (OVL-13), and menubar.test.tsx asserts the rendered popup carries it, so the day that composition changes the test fails rather than the scope going quiet.
• Rows carry the hand cursor from the one global rule in base.css (INT-1).
• A disabled row keeps its pointer events (FRM-4), so a Tooltip can explain why it is unavailable.

Do / Don't

Deviations

Upstream's file plus packages/ui/upstream/patches/menubar.patch. Every hunk:

• FOC-1 — outline-hidden is dropped from MenubarTrigger. A trigger is a real focusable control (role="menuitem", in the bar's roving tab order), and upstream's class suppressed the one 2px :focus-visible outline base.css owns, leaving it with no focus indicator at all. The two item parts keep outline-hidden: they replace the outline with focus:bg-accent, which is the sanctioned substitute affordance.
• INT-1 — cursor-default is removed from MenubarCheckboxItem and MenubarRadioItem, the only two parts menubar renders from Menu itself. Its item, submenu trigger, label, separator and shortcut compose dropdown-menu's already-patched parts.
• FRM-4 — data-disabled:pointer-events-none is dropped from those same two parts.
• OVL-13 — no hunk, and that is the implementation, not an omission. Menubar opens no portal of its own: MenubarContent, MenubarSubContent and MenubarPortal are thin wrappers over DropdownMenuContent / DropdownMenuSubContent / DropdownMenuPortal, which carry the scope. menubar.test.tsx asserts the rendered popup carries it, so the day that composition changes the test fails rather than the scope going quiet.
• DOC-2 — import { cn } from "cn" becomes @vegastack/design; our npm layer owns cn.
• DOC-1 — prettier reflow plus the registry-stamp.mjs provenance header; no decision of their own.