Menubar

A horizontal or vertical bar containing multiple menu triggers. Menubars are commonly used for application-level navigation and actions, providing a consistent interface for accessing various menus.

Import

import { Menubar } from '@base-ui/react/Menubar';
import * as Menu from '@base-ui/react/Menu';

Basic Usage

<Menubar>
  <Menu.Root>
    <Menu.Trigger>File</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>New</Menu.Item>
          <Menu.Item>Open</Menu.Item>
          <Menu.Item>Save</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
  
  <Menu.Root>
    <Menu.Trigger>Edit</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>Cut</Menu.Item>
          <Menu.Item>Copy</Menu.Item>
          <Menu.Item>Paste</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
  
  <Menu.Root>
    <Menu.Trigger>View</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>Zoom In</Menu.Item>
          <Menu.Item>Zoom Out</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
</Menubar>

Key Props

The container for menus. Renders a <div> element. Props:

orientation: 'horizontal' | 'vertical' - The orientation of the menubar (default: 'horizontal')
modal: boolean - Whether the menubar is modal (default: true)
disabled: boolean - Whether the whole menubar is disabled (default: false)
loopFocus: boolean - Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys (default: true)

State:

data-has-submenu-open: 'true' | 'false' - Indicates whether any submenu within the menubar is open

Features

Keyboard navigation with arrow keys to move between menu triggers
Automatic hover behavior when a menu is open
Support for horizontal and vertical orientations
Modal and non-modal modes
Accessible ARIA attributes (role="menubar")
Loop focus option for continuous navigation

Styling Example

.Menubar {
  display: flex;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px;
}

.Menubar[data-has-submenu-open="true"] {
  background: #f9f9f9;
}

.MenuTrigger {
  padding: 6px 12px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.MenuTrigger[data-open] {
  background: #e5e5e5;
}

.MenuTrigger:hover {
  background: #f0f0f0;
}

Common Patterns

Vertical Menubar

<Menubar orientation="vertical">
  <Menu.Root>
    <Menu.Trigger>Dashboard</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>Overview</Menu.Item>
          <Menu.Item>Analytics</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
  
  <Menu.Root>
    <Menu.Trigger>Settings</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>Profile</Menu.Item>
          <Menu.Item>Preferences</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
</Menubar>

<Menubar modal={false}>
  <Menu.Root>
    <Menu.Trigger>File</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>New</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
</Menubar>

<Menubar className="AppMenubar">
  <Menu.Root>
    <Menu.Trigger>File</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>New File</Menu.Item>
          <Menu.Item>Open File</Menu.Item>
          <Menu.Separator />
          <Menu.Item>Save</Menu.Item>
          <Menu.Item>Save As...</Menu.Item>
          <Menu.Separator />
          <Menu.Item>Exit</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
  
  <Menu.Root>
    <Menu.Trigger>Edit</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>Undo</Menu.Item>
          <Menu.Item>Redo</Menu.Item>
          <Menu.Separator />
          <Menu.Item>Cut</Menu.Item>
          <Menu.Item>Copy</Menu.Item>
          <Menu.Item>Paste</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
  
  <Menu.Root>
    <Menu.Trigger>Help</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>Documentation</Menu.Item>
          <Menu.Item>About</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
</Menubar>

Getting Started

Handbook

Inputs

Data Display

Navigation

Overlays

Forms

Layout

Utilities

Menubar

Import

Basic Usage

Key Props

Menubar

Features

Styling Example

Common Patterns

Vertical Menubar

Application Menu Bar

​Import

​Basic Usage

​Key Props

​Menubar

​Features

​Styling Example

​Common Patterns

​Vertical Menubar

​Non-Modal Menubar

​Application Menu Bar

Import

Basic Usage

Key Props

Menubar

Features

Styling Example

Common Patterns

Vertical Menubar

Non-Modal Menubar

Application Menu Bar