Docs › Components › Menubar

Shadcn Menubar

The shadcn/ui Menubar is a desktop-style application menu bar, styled with Tailwind CSS v4. Built on Base UI, it coordinates several top-level menus with submenus, checkboxes, and shortcuts, and supports arrow-key navigation between menus. Menubars power app chrome across ShadcnStore application blocks.

Key features

• A bar of coordinated menus (File, Edit, View…).
• Items, submenus, checkboxes, radios, and shortcuts.
• Arrow-key navigation across and within menus.
• Renders menu content in a portal.
• Built on Base UI with arrow-key navigation across menus.

Installation

npx shadcn@latest add menubar

Usage

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

export function Example() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Accessibility

• The bar and its menus are keyboard-navigable; preserve the arrow-key behavior.
• Give each trigger a short, distinct label.
• Pair rarely-used commands with visible shortcuts where helpful.

When to use the Menubar

Use a Menubar for desktop-style apps that need a persistent bar of grouped commands: editors, dashboards, and tools. For a single button menu, use a Dropdown Menu. For right-click actions, use a Context Menu.

Used in these blocks

• Apps: editor and tool menu bars.
• App shells: application chrome.
• Widgets: panel command menus.

Related components

For a single menu use a Dropdown Menu; for right-click use a Context Menu; for site navigation use a Navigation Menu.

FAQ

What is the shadcn menubar used for?

The Menubar is a desktop-style application menu bar with top-level menus like File, Edit, and View, each opening a dropdown of commands.

What is the difference between Menubar and Dropdown Menu?

Menubar is a persistent bar of several coordinated menus. Dropdown Menu is a single menu opened from one button.

Does the menubar support submenus and shortcuts?

Yes. It supports MenubarSub, MenubarCheckboxItem, MenubarRadioGroup, and MenubarShortcut.

Is a menubar a good fit for mobile?

Not usually. On small screens prefer a Sheet or Drawer navigation instead.