Menubar

A horizontal bar of menus, similar to the application menus found in desktop software (File, Edit, View). Each trigger opens a dropdown on click. Built on @base-ui/react/menu with full keyboard navigation across the bar.

Anatomy

<Menubar> is the horizontal container. Each menu is a <MenubarMenu> wrapping a MenubarTrigger (the tab label) and MenubarContent (the dropdown). Inside the content use MenubarItem for actions, MenubarLabel for group headings, MenubarSeparator for dividers, and MenubarShortcut for keyboard hints.

MenubarMenu per sectionMenubarTrigger (tab)MenubarContent (dropdown)

Examples

Editor — with labels and shortcuts

Minimal — two menus

Design Guidelines

Do

  • Use for app-level actions. Menubar suits web apps with many features — editors, dashboards, productivity tools — where a persistent action bar makes sense.
  • Group items logically. Use MenubarLabel and MenubarSeparator to cluster related items within a menu.
  • Add keyboard shortcuts. Desktop-app users expect them — MenubarShortcut shows the binding without adding functionality (wire shortcuts separately).

Don't

  • Don't use for site navigation. Menubar is for action menus, not page navigation — use NavigationMenu for site-level links.
  • Don't add too many top-level menus. More than 5–6 tabs makes the bar crowded. Merge related categories or move less-used actions to a Settings page.
  • Don't rely on it on mobile. A horizontal menubar does not work well on small screens — provide an alternative (sheet, bottom nav) for mobile viewports.

Developer Reference

Accessibility

  • <Menubar> has role="menubar". Each MenubarMenu acts as a menu item in the bar.
  • Left / Right arrow keys move focus between MenubarTrigger tabs. Down arrow or Enter opens the focused menu.
  • Inside an open menu, Up / Down arrow keys navigate items. ESC closes the menu and returns focus to the trigger.
  • MenubarShortcut is presentational only — wire actual keyboard shortcuts with a keydown listener or a shortcut library.

Usage

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New File <MenubarShortcut>⌘N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Save <MenubarShortcut>⌘S</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Close</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarLabel>Clipboard</MenubarLabel>
      <MenubarItem>Cut</MenubarItem>
      <MenubarItem>Copy</MenubarItem>
      <MenubarItem>Paste</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>