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 />

Usage

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.

API Reference

Root

The container element for the menubar.

Prop

Type

Examples

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>

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