---
title: Menubar
description: A horizontal menu bar with multiple menus — such as File, Edit, and View — built on the Base UI Menu primitive.
---

```tsx
"use client";

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/registry/base/ui/menubar";

export default function MenubarDemo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New tab
            <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New window
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Messages</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Print
            <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo
            <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem defaultChecked>
            Always show bookmarks
          </MenubarCheckboxItem>
          <MenubarCheckboxItem>Always show full URLs</MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarItem>
            Reload
            <MenubarShortcut>⌘R</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}
```

## Installation

<InstallCommand item="menubar" />

## Usage

```tsx
"use client";

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

export default function MenubarDemo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New tab
            <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New window
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Messages</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Print
            <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo
            <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem defaultChecked>
            Always show bookmarks
          </MenubarCheckboxItem>
          <MenubarCheckboxItem>Always show full URLs</MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarItem>
            Reload
            <MenubarShortcut>⌘R</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}
```

## API reference

### Menubar

Extends the
[Base UI Menubar](https://base-ui.com/react/components/menubar)
component — not a `.Root`: it renders a plain `<div role="menubar">`
directly, coordinating a row of individual Menu instances.

| Prop          | Type                         | Default        |
| ------------- | ---------------------------- | -------------- |
| `modal`       | `boolean`                    | `true`         |
| `disabled`    | `boolean`                    | `false`        |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |
| `loopFocus`   | `boolean` — arrow keys wrap  | `true`         |

### MenubarMenu

An ordinary `Menu.Root` from `@base-ui/react/menu` — the same primitive
[Dropdown Menu](/docs/components/dropdown-menu) builds on, so items
share the same data attributes, `closeOnClick` defaults, and
checkbox/radio behavior documented there.

### MenubarTrigger

The menubar coordinates sibling menus through context: once one menu is
open, hovering a different trigger switches the open menu automatically
— no `openOnHover` prop is needed (or read). Open state styles via
`data-popup-open`, pressed state via `data-pressed`.

### MenubarContent

The Positioner only exposes `sideOffset` and `alignOffset` — parented to
a menubar trigger it automatically defaults to `side="bottom"
align="start"`, so there is no `side`/`align` prop to pass.

### MenubarSub, MenubarSubTrigger, MenubarSubContent, and item parts

Submenus are identical to dropdown-menu's (`SubmenuRoot`-based). Item,
CheckboxItem, RadioGroup/RadioItem, Label, Separator, and Shortcut
mirror their dropdown-menu counterparts.

## Usage guidance

A menubar is a persistent, always-visible row of menus — reach for it when
modeling an application-style command bar (File/Edit/View...), not as a
one-off dropdown. For a single triggered menu use `dropdown-menu`; for a
right-click / long-press menu use `context-menu`.