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

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

Basic

tsx

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

export default function MenubarBasic() {
  return (
    <Menubar className="bg-muted flex items-center gap-0.5 rounded-lg p-1">
      <Menubar.Menu>
        <Menu.Trigger variant="tertiary" size="small">
          File
        </Menu.Trigger>
        <Menu.Content>
          <Menu.Item>New note</Menu.Item>
          <Menu.Item>Import transcript…</Menu.Item>
          <Menu.Separator />
          <Menu.Item>Export</Menu.Item>
        </Menu.Content>
      </Menubar.Menu>
      <Menubar.Menu>
        <Menu.Trigger variant="tertiary" size="small">
          Edit
        </Menu.Trigger>
        <Menu.Content>
          <Menu.Item>Undo</Menu.Item>
          <Menu.Item>Redo</Menu.Item>
          <Menu.Separator />
          <Menu.Item>Find…</Menu.Item>
        </Menu.Content>
      </Menubar.Menu>
      <Menubar.Menu>
        <Menu.Trigger variant="tertiary" size="small">
          View
        </Menu.Trigger>
        <Menu.Content>
          <Menu.Item>Zoom in</Menu.Item>
          <Menu.Item>Zoom out</Menu.Item>
        </Menu.Content>
      </Menubar.Menu>
    </Menubar>
  )
}

Parts

Compound sub-components. Every part accepts className and forwards the rest of its props to Base UI.

Menubar.Menu: One menu in the bar. Put Menu.Trigger and Menu.Content inside.