Menubar

A menu bar providing commands and options for your application.

Anatomy

Import the component and assemble its parts:

Anatomy

import { Menubar } from '@base-ui/react/menubar';
import { Menu } from '@base-ui/react/menu';

<Menubar>
  <Menu.Root>
    <Menu.Trigger />
    <Menu.Portal>
      <Menu.Backdrop />
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Arrow />
          <Menu.Item />
          <Menu.Separator />
          <Menu.Group>
            <Menu.GroupLabel />
          </Menu.Group>
          <Menu.RadioGroup>
            <Menu.RadioItem />
          </Menu.RadioGroup>
          <Menu.CheckboxItem />
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
</Menubar>;

API reference

Root

Name	Type	Default	Description
`modal`Optional	`boolean \| undefined`	`true`	Whether the menubar is modal.
`disabled`Optional	`boolean \| undefined`	`false`	Whether the whole menubar is disabled.
`orientation`Optional	`MenuRoot.Orientation \| undefined`	`horizontal`	The orientation of the menubar.
`loopFocus`Optional	`boolean \| undefined`	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.

Menubar

Anatomy

API reference

Root

On this page