Menubar

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Group application commands into menus such as Run, View, and Help. Each menu reuses the shared Menu parts: Item, CheckboxItem, RadioItem, submenus, and LinkItem.

Use NavigationMenu or a native nav for a site's primary navigation or plain link lists. Don't nest other buttons inside a Menu.Trigger. Add those commands as Menu.Item instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Menubar(role=menubar) → Menu.Root(Trigger + Portal/Content(Item/CheckboxItem/RadioItem/Submenu))

Keyboard and accessibility

• Arrow keys move between menu triggers.
• Enter or Space, or the arrow key toward the menu, opens a menu.
• Base UI handles moving between open menus, closing with Escape, returning focus to the trigger, and submenu arrow keys.
• Keep orientation consistent with DirectionProvider and the DOM dir.
• Base UI 1.9 stores the initial direction in the menu model. If the direction changes at runtime, give the Menubar an orientation-based key so it remounts.
• Control menu selection values from the parent.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

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

<Menubar aria-label='Deployment commands' modal={false}>
  <Menu.Root>
    <Menu.Trigger>Run</Menu.Trigger>
    <Menu.Portal>
      <Menu.Content align='start'>
        <Menu.Item onClick={preparePreview}>New preview</Menu.Item>
        <Menu.Item disabled>Delete runs</Menu.Item>
      </Menu.Content>
    </Menu.Portal>
  </Menu.Root>
</Menubar>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens