Menubar

Usage

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@tulipfarm/sprout/menubar";

<Menubar aria-label="Application menu">
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem onClick={newDraft}>
        New draft<MenubarShortcut>⌘ N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled>Print</MenubarItem>
      <MenubarSeparator />
      <MenubarItem variant="destructive" onClick={discard}>Discard draft</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked={sidebar} onCheckedChange={setSidebar}>
        Show sidebar
      </MenubarCheckboxItem>
      <MenubarRadioGroup value={density} onValueChange={setDensity}>
        <MenubarRadioItem value="compact">Compact</MenubarRadioItem>
        <MenubarRadioItem value="comfortable">Comfortable</MenubarRadioItem>
      </MenubarRadioGroup>
      <MenubarSub>
        <MenubarSubTrigger>More</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem onClick={zoomIn}>Zoom in</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Variants and states

MenubarItem variant is "default" or "destructive"; destructive items use the danger color and a tinted highlight. disabled items stay readable at half opacity and can still be reached with arrow keys. Checkbox and radio items show a check at the start, so rows without a check use inset to line up with them. Long names in a submenu can truncate with an ellipsis.

API

Menubar wraps the Base UI menubar and takes modal, disabled, orientation, and loopFocus. Give it an aria-label. MenubarMenu, MenubarTrigger, MenubarPortal, MenubarGroup, MenubarSub, MenubarRadioGroup, and MenubarSeparator wrap the Base UI menu parts and take their props, including open,onOpenChange, and render.

MenubarContent renders its own portal and positioner. It takesside ("bottom"), align ("start"), sideOffset (8), alignOffset (-4), collisionPadding (8), container, and every Base UI popup prop. It is at least 9rem wide and grows with its items up to 20rem. MenubarSubContent takes the same props and opens to the right.

MenubarItem takes variant and inset. MenubarLabel, MenubarSubTrigger, and the checkbox and radio items take inset too. Put a MenubarLabel inside a MenubarGroup; the group takes its name from the label. MenubarShortcut is a plain span for hint text; it does not bind keys. Every part sets a data-slot.

Accessibility

The bar has role="menubar" and is one Tab stop. Arrow Left and Arrow Right move between triggers, Arrow Down or Enter opens a menu, and while a menu is open Arrow Left and Arrow Right move to the next menu. Inside a menu, arrow keys move, typing jumps to a matching item, Arrow Right opens a submenu, and Escape closes the menu and returns focus to its trigger. A focused trigger shows a focus ring.

Menus fade and scale in over 120ms. Motion turns off when reduced motion is requested. In forced-colors mode the open trigger and highlighted item get an outline.

Theme tokens

Menubars use --sprout-surface, --sprout-line, --sprout-hover, --sprout-text, --sprout-muted, --sprout-danger, --sprout-danger-subtle, --sprout-focus, --sprout-shadow-control, --sprout-shadow-overlay, and the panel and control radii. They need no brand color, so they look the same with the neutral and TulipFarm themes in light and dark mode.