Menubar

Powered by

Base UIShadcn UILucide

Installation

When to use

The Menubar component provides persistent menu access similar to desktop applications. Use this decision tree to determine when it's appropriate:

Usage

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Examples

Checkbox items

Radio items

Nested submenus

Props

Keyboard interactions

Accessibility

• The menubar container has role="menubar" and each top-level trigger role="menuitem" with aria-haspopup="menu" and aria-expanded.
• Focus is roving across both the menubar and each menu; only one trigger is in the tab order.
• Keep labels short and single-level where possible. Deeply nested submenus are hard to reach for motor-impaired users — consider a DropdownMenu with keepMounted panels instead.
• Base UI note: the Radix value / onValueChange props on Menubar do not exist — open state lives on each child MenubarMenu. See the migration callout.

Credits

• We use Base UI for the menubar component.
• We take our inspiration from Shadcn UI for the menubar style.