Menubar

Installation

pnpm dlx shadcn@latest add @paneui/menubar

Usage

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

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

Composition

Menubar
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        ├── MenubarItem / MenubarCheckboxItem / MenubarRadioGroup
        ├── MenubarSub → MenubarSubTrigger, MenubarSubContent
        └── MenubarSeparator

Examples

Radio Items

Keyboard

←/→ move between menus; once one is open, hovering or arrowing to another trigger switches menus. Items inside behave as in Menu.

API Reference

Built on the Menubar primitive. Only the props this library adds or changes are listed; everything else passes through.

Also accepts every prop of Menubar.

MenubarMenu

Re-export of the menu root. Also accepts every prop of Menu.Root.

MenubarTrigger

Also accepts every prop of Menu.Trigger.

data-popup-open: Present while its menu is open.

Data attribute	Description
data-popup-open	Present while its menu is open.

MenubarContent

MenuContent, aligned to the trigger's start. Also accepts every prop of MenuContent.

MenubarItem, MenubarCheckboxItem, MenubarRadioItem…

The Menu parts under menubar names. Also accepts every prop of Menu parts.