ComponentsUpdated Sep 9, 2026

Menubar

A horizontal row of Menus that open on hover once one is open, with arrow keys moving between them. Each Menubar.Menu is a Menu root, so the trigger and content parts come from Menu.

Import

Source: packages/ui/src/components/menubar

tsx

1import { Menubar, Menu } from '@highlight/ui'

Playground

Change the props; the preview and the snippet update together.

Props

Menus

Trigger variant

Trigger size

tsx

1<Menubar className="bg-background-subtle flex items-center gap-0.5 rounded-lg p-1">2  <Menubar.Menu>3    <Menu.Trigger variant="ghost" size="sm">File</Menu.Trigger>4    <Menu.Content>5      <Menu.Item>New note</Menu.Item>6      <Menu.Item>Import transcript…</Menu.Item>7      <Menu.Item>Export</Menu.Item>8    </Menu.Content>9  </Menubar.Menu>10  <Menubar.Menu>11    <Menu.Trigger variant="ghost" size="sm">Edit</Menu.Trigger>12    <Menu.Content>13      <Menu.Item>Undo</Menu.Item>14      <Menu.Item>Redo</Menu.Item>15      <Menu.Item>Find…</Menu.Item>16    </Menu.Content>17  </Menubar.Menu>18  <Menubar.Menu>19    <Menu.Trigger variant="ghost" size="sm">View</Menu.Trigger>20    <Menu.Content>21      <Menu.Item>Zoom in</Menu.Item>22      <Menu.Item>Zoom out</Menu.Item>23    </Menu.Content>24  </Menubar.Menu>25</Menubar>

Basic

tsx

1import { Menu, Menubar } from '@highlight/ui'2 3export default function MenubarBasic() {4  return (5    <Menubar className="bg-background-subtle flex items-center gap-0.5 rounded-lg p-1">6      <Menubar.Menu>7        <Menu.Trigger variant="ghost" size="sm">8          File9        </Menu.Trigger>10        <Menu.Content>11          <Menu.Item>New note</Menu.Item>12          <Menu.Item>Import transcript…</Menu.Item>13          <Menu.Separator />14          <Menu.Item>Export</Menu.Item>15        </Menu.Content>16      </Menubar.Menu>17      <Menubar.Menu>18        <Menu.Trigger variant="ghost" size="sm">19          Edit20        </Menu.Trigger>21        <Menu.Content>22          <Menu.Item>Undo</Menu.Item>23          <Menu.Item>Redo</Menu.Item>24          <Menu.Separator />25          <Menu.Item>Find…</Menu.Item>26        </Menu.Content>27      </Menubar.Menu>28      <Menubar.Menu>29        <Menu.Trigger variant="ghost" size="sm">30          View31        </Menu.Trigger>32        <Menu.Content>33          <Menu.Item>Zoom in</Menu.Item>34          <Menu.Item>Zoom out</Menu.Item>35        </Menu.Content>36      </Menubar.Menu>37    </Menubar>38  )39}

Parts

The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.

Menubar: Base UI Menubar. The horizontal bar that holds a row of Menus and moves focus between them.
Menubar.Menu: One menu in the bar. Put Menu.Trigger and Menu.Content inside.