Shadcn Menubar Components

Shadcn Menubar Component

The Shadcn Menubar is a horizontal row of menus, like the File, Edit and View bar at the top of a desktop application. Each trigger opens a dropdown with commands, shortcuts, toggles and submenus. It gives complex web apps such as editors, design tools and admin consoles a familiar, always visible place for their commands.

Instead of many small demos, the shadcn menubar here is one complete desktop style app bar with File, Edit, View and Profiles menus that combine keyboard shortcuts, submenus, checkbox items and a radio group for switching profiles. It is built with shadcn/ui, React and Tailwind CSS and follows the interaction patterns of both the Radix UI and Base UI primitives.

What is the Shadcn Menubar Component?

A menubar is a group of menu buttons that behave as one widget. Once a menu is open, moving the pointer or pressing the arrow keys over the other triggers opens their menus right away, just like a native menu bar. Inside each menu you can mix regular items, checkbox items, radio groups, labels, separators and nested submenus, and every item can show a keyboard shortcut on the right.

Use a menubar when your app has many commands that users come back to often and expect to find in the same place, typically in editors and tools. For a single menu opened from a button or an avatar, use a Dropdown Menu. For menus opened with a right click on an element, use a Context Menu, and for website navigation with links, the Navigation Menu is the right choice.

Anatomy of the Shadcn Menubar

1 Shadcn Menubar Variant

Each menubar variant listed here is previewed live at the top of this page, together with its source code and install command.

• File menu: The first menu of the single Menubar example: New Tab and New Window with shortcuts, a disabled item, a Share submenu and a Print command.
• Edit menu: Undo and Redo with shortcuts, a Find submenu with its own separator, and Cut, Copy and Paste.
• View menu: Checkbox items for bookmarks and full URLs, followed by inset Reload, Force Reload (disabled), fullscreen and sidebar items that line up with the checked labels.
• Profiles menu: A radio group for switching the active profile, plus Edit and Add Profile actions.

How to Install the Shadcn Menubar Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a menubar variant by its name:

npx shadcn@latest add @shadcnuikit/menubar1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Menubar Component

Import the parts from your components/ui folder. Every menu is a MenubarMenu with a trigger and content, and items can hold shortcuts, checkboxes, radios or submenus.

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

export function EditorMenubar() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New File <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Save <MenubarShortcut>⌘S</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem variant="destructive">Close Project</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked>Show Sidebar</MenubarCheckboxItem>
          <MenubarCheckboxItem>Show Minimap</MenubarCheckboxItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Why Use the Shadcn Menubar Component

• Familiar pattern: Users already know File, Edit and View menus from desktop software, so there is nothing new to learn.
• Full keyboard support: Arrow keys move between menus and items, and focus, submenus and closing are handled by the primitive.
• Rich item types: Commands, checkboxes, radio groups, labels, submenus and shortcuts all fit in the same menu.
• Always visible: Commands have a fixed home at the top of the screen instead of being scattered across toolbars.
• Styleable: Triggers, panels and items are Tailwind classes with data attributes for open, highlighted and disabled states.

Common Menubar Use Cases

• Code and text editors: File, Edit, View and Help menus in web based IDEs and writing tools.
• Design tools: Menus for layers, arrange, view options and export in canvas based apps.
• Spreadsheets and data apps: Insert, format and data commands above a grid, with checkbox items for view settings.
• Admin consoles: Grouped actions for records, filters and exports in internal tools.
• Desktop style web apps: Electron or Tauri apps that want a menu bar inside the window.

Customizing the Shadcn Menubar

Style the bar with a className on Menubar, for example to remove its border or make it full width. Open triggers expose aria-expanded and highlighted items expose data-highlighted, so you can change their colors with Tailwind variants. Use inset on regular items to align them with checkbox and radio labels, and variant="destructive" for actions such as delete. Colors come from your theme, which you can build with the free Theme Generator.

<Menubar className="rounded-none border-x-0 border-t-0 px-2">
  <MenubarMenu>
    <MenubarTrigger className="aria-expanded:bg-primary aria-expanded:text-primary-foreground">
      File
    </MenubarTrigger>
    ...
  </MenubarMenu>
</Menubar>

Menubar Accessibility and Keyboard Support

The menubar follows the WAI-ARIA menubar pattern. The bar has role="menubar", triggers announce whether their menu is expanded, and items use menuitem, menuitemcheckbox and menuitemradio roles so screen readers read their checked state. Focus returns to the trigger when a menu closes, and typing a letter moves focus to the next item that starts with it.

MenubarShortcut only displays a shortcut. If you show one, also register it in your app so the key combination really runs the command.

Menubar Best Practices

• Keep the number of top level menus small, usually four to seven, and use familiar names like File and Edit.
• Group related items with separators and put the most used commands at the top of each menu.
• Only show shortcuts that really work, and use the platform symbols your users expect.
• Limit submenus to one level; deeper nesting is hard to use with a pointer.
• Add inset to plain items in menus that also contain checkbox or radio items so all labels line up.
• On small screens, consider replacing the menubar with a Sheet or a single dropdown.

Components Related to Menubar

Shadcn Menubar FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.