Skip to content

Menubar

Persistent application menu bar. Compose with Menu parts for File / Edit / View style commands.

Examples

Application

Overview

Menubar is the horizontal shell. Nest Menu trees inside for each top-level trigger. Arrow keys move across menus when open.

tsx

import {
  Menubar,
  Menu,
  MenuTrigger,
  MenuPortal,
  MenuPositioner,
  MenuPopup,
  MenuItem,
} from "@standard-ui/react"

<Menubar>
  <Menu>
    <MenuTrigger>File</MenuTrigger>
    <MenuPortal>
      <MenuPositioner>
        <MenuPopup>
          <MenuItem>New</MenuItem>
        </MenuPopup>
      </MenuPositioner>
    </MenuPortal>
  </Menu>
</Menubar>

API

PartRole
MenubarOrientation, modal, and focus looping for menus.
Menu*Reuse the Menu compound parts for each top item.

Guidelines

Do

  • Keep top-level labels short (File, Edit, View)
  • Group destructive actions with a separator

Don't

  • Don't use Menubar for site navigation — use Navigation menu
  • Don't bury the only path to a primary action in a menubar