Menubar

A horizontal strip of menus (File, Edit, View), wrapping the Base UI Menubar. Only the bar is new; every menu inside is a regular Bones Menu, submenus and checkbox items included.

Playground

Every control maps to a prop. Open a menu and slide along the bar; the Code tab always shows the markup for exactly what you've configured.

Variants

Horizontal is the default; vertical stacks the triggers into a column, swaps the arrow keys to up and down, and pairs naturally with side="right" on each menu's content.

States

Open is live: the open trigger carries data-popup-open and hovering a neighbour switches to it; disabled on the bar switches off every menu at once, and hover and focus are the ghost buttons' own.

Styling states

The bar ships as layout only (no border, background, or padding), so it drops into a header without a fight, and carries data-orientation so a vertical strip can size itself differently; for a standalone bar, add your own chrome:

.ub-menubar {
  padding: 0.25rem;
  border: 1px solid var(--ub-border);
  border-radius: var(--ub-radius-md);
}

.ub-menubar[data-orientation="vertical"] {
  width: 12rem;
}

Props

The menus and their items accept everything Menu accepts. The bar-specific parts:

One quirk: the bar has no size of its own. Set size on each MenuRoot and the same size on its trigger Button, or the rows and the strip end up mismatched.

Agent instructions

Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.

Menubar, from @usebones/react.
- One container: put regular Bones Menus inside (MenuRoot + MenuTrigger render={<Button variant="ghost" />} + MenuContent with MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuSeparator, submenus).
- One menu open at a time; hovering another trigger switches to it, arrow keys move along the bar (swapped by orientation "vertical"; give each MenuContent side="right" there).
- disabled on the bar switches off every menu. Size lives on each MenuRoot and its trigger Button, not on the bar.
- Restyle in CSS via .ub-menubar: the bar is layout only (no border, background, or padding), so add chrome there in the app when it stands alone. [data-orientation="vertical"] for the column form; the menus use Menu's classes and [data-popup-open] on the open trigger. Tokens only.