Menubar

A horizontal menu bar providing commands and options for your application, typically used at the top of a window.

1<Menubar>
2  <Menu>
3    <Menu.Trigger>File</Menu.Trigger>
4    <Menu.Content>
5      <Menu.Item>New Tab</Menu.Item>
6      <Menu.Item>New Window</Menu.Item>
7      <Menu.Separator />
8      <Menu.Submenu>
9        <Menu.SubmenuTrigger>Share</Menu.SubmenuTrigger>
10        <Menu.SubmenuContent>
11          <Menu.Item>Email Link</Menu.Item>
12          <Menu.Item>Messages</Menu.Item>
13        </Menu.SubmenuContent>
14      </Menu.Submenu>
15      <Menu.Separator />

Anatomy

Import and assemble the component:

1import { Menu, Menubar } from '@raystack/apsara'
2

3<Menubar>
4  <Menu>
5    <Menu.Trigger>File</Menu.Trigger>
6    <Menu.Content>
7      <Menu.Item>New</Menu.Item>
8      <Menu.Item>Open</Menu.Item>
9    </Menu.Content>
10  </Menu>
11  <Menu>
12    <Menu.Trigger>Edit</Menu.Trigger>
13    <Menu.Content>
14      <Menu.Item>Undo</Menu.Item>
15      <Menu.Item>Redo</Menu.Item>
16    </Menu.Content>
17  </Menu>
18</Menubar>

The Menubar component wraps multiple Menu instances. Menu triggers are automatically styled when inside a Menubar. If you pass a render prop to Menu.Trigger, the default menubar trigger styling is skipped, allowing full custom rendering.

Usage

A menubar is a row of menus sharing one keyboard focus, so most of its behaviour comes from Menu itself.

Vertical

Use the orientation prop to render a vertical menubar.

1<Menubar orientation="vertical">
2  <Menu>
3    <Menu.Trigger>File</Menu.Trigger>
4    <Menu.Content side="right">
5      <Menu.Item>New</Menu.Item>
6      <Menu.Item>Open</Menu.Item>
7      <Menu.Item>Save</Menu.Item>
8    </Menu.Content>
9  </Menu>
10  <Menu>
11    <Menu.Trigger>Edit</Menu.Trigger>
12    <Menu.Content side="right">
13      <Menu.Item>Undo</Menu.Item>
14      <Menu.Item>Redo</Menu.Item>
15    </Menu.Content>

Autocomplete

Use the autocomplete prop on Menu to enable search filtering within a menubar menu.

1<Menubar>
2  <Menu>
3    <Menu.Trigger>Settings</Menu.Trigger>
4    <Menu.Content>
5      <Menu.Item>Preferences</Menu.Item>
6      <Menu.Item>Themes</Menu.Item>
7    </Menu.Content>
8  </Menu>
9  <Menu autocomplete>
10    <Menu.Trigger>Actions</Menu.Trigger>
11    <Menu.Content searchPlaceholder="Search actions...">
12      <Menu.Group>
13        <Menu.Label>General</Menu.Label>
14        <Menu.Item>Assign member...</Menu.Item>
15        <Menu.Item>Subscribe...</Menu.Item>

API Reference

Just the bar itself — the menus inside are plain Menus.

Root

The container element for the menubar.

Prop

Type

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
menubarThe root element

Accessibility

  • Uses role="menubar" for proper ARIA semantics
  • Supports keyboard navigation between menu triggers using arrow keys
  • loopFocus cycles focus from last to first trigger (enabled by default)
  • Each menu trigger opens its dropdown on click or Enter/Space