---
title: Menubar
description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
icon: menu
author:
  name: shadcn
  url: https://github.com/shadcn
related:
  - /dropdown-menu
  - /navigation-menu
mode: wide
---

<PoweredBy
  packages={[
    { name: 'Base UI', url: 'https://base-ui.com/react/components/menubar' },
    { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/menubar' },
    { name: 'Lucide', url: 'https://lucide.dev/' },
  ]}
/>

### Installation

```package-install
npx shadcn@latest add @redpanda/menubar
```

<ComponentPreview name="menubar-demo" />

## When to use

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

```mermaid
graph TD;
    A[❓ Need menu access?] --> B{Always visible menu?};
    A --> C[ℹ️ Use other navigation];
    B --> D{Desktop app pattern?};
    B --> E{Contextual menu?};
    D --> F[✅ Use Menubar];
    E --> G[✅ Use DropdownMenu];
    E --> H{Navigation menu?};
    H --> I[✅ Use NavigationMenu];
    H --> J[✅ Use Menubar for consistency];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class F,G,I,J recommended;
    class A,B,D,E,H decision;
    class C neutral;
```

## Usage

```tsx
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from '@/components/ui/menubar';
```

```tsx
<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

<ComponentPreview name="menubar-checkbox-demo" description="Menubar with checkbox items for toggle state." />

### Radio items

<ComponentPreview name="menubar-radio-demo" description="Menubar with radio-group items for exclusive selection." />

### Nested submenus

<ComponentPreview name="menubar-submenu-demo" description="Menubar with nested submenus for deep action hierarchies." />

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink href="https://base-ui.com/react/components/menubar" text="Docs" />
  <ExternalLink href="https://base-ui.com/react/components/menubar#api-reference" text="API Reference" />
</div>

## Keyboard interactions

| Key                                        | Action                                                      |
| ------------------------------------------ | ----------------------------------------------------------- |
| `Tab` into the menubar                     | Focus lands on the first top-level trigger.                 |
| `ArrowLeft` / `ArrowRight`                 | Moves between top-level menus.                              |
| `ArrowDown` / `Enter` / `Space`            | Opens the focused menu and focuses its first item.          |
| `ArrowUp` / `ArrowDown` (inside a menu)    | Moves between items.                                        |
| `ArrowLeft` / `ArrowRight` (inside a menu) | Opens / closes submenus _and_ moves between adjacent menus. |
| `Home` / `End`                             | Jumps to first / last item.                                 |
| `Enter` / `Space`                          | Activates the focused item.                                 |
| `Escape`                                   | Closes the open menu.                                       |
| Typing a character                         | Typeahead jumps to the next matching item.                  |

## 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](https://base-ui.com/react/components/menubar) for the menubar component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/menubar) for the menubar style.