Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Powered by

Base UIShadcn UILucide

Installation

npx shadcn@latest add @redpanda/menubar

pnpm dlx shadcn@latest add @redpanda/menubar

yarn dlx shadcn@latest add @redpanda/menubar

bunx shadcn@latest add @redpanda/menubar

nubx shadcn@latest add @redpanda/menubar

aube dlx shadcn@latest add @redpanda/menubar

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.
• Open state lives on each child MenubarMenu (set open / onOpenChange there), not on the Menubar root.

Credits

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