Menubar

Desktop-style menu bar.

Usage

Compose Root > Menu > (Trigger + Content). Menu pairs one trigger with its panel; a menubar holds several. Give Root an aria-label.

Menubar vs Dropdown Menu

A menubar is not a row of Dropdown Menus. Two behaviours make it a single control rather than several:

  • Arrow keys move between the top-level menus, so the whole bar is one tab stop.
  • Once one menu is open, hovering a sibling switches to it — no second click. That is the desktop-app behaviour people already expect from a menu bar.

Build it from separate dropdowns and you lose both, which is exactly the kind of regression nobody notices with a mouse.

Shared menu parts

Item, Group, Label and Separator are the same components Dropdown Menu and Context Menu use. Bits re-exports identical menu internals to all three, so the three menus look and behave the same by construction rather than by three copies of the same CSS agreeing for now.

They stay context-aware — the same wrapper emits data-menubar-item here.

When not to use it

A menubar is a desktop-application pattern. On a website it is usually the wrong shape.

It assumes a pointer that hovers and a screen wide enough for several always-visible triggers — neither holds on a phone. For site navigation reach for a Navigation Menu; for a handful of actions on a toolbar, a Dropdown Menu or Toolbar. Use a menubar when you are genuinely building an application chrome — an editor, an IDE-like tool.

Props

Menubar.Root

PropTypeDefault
class Extra classes merged onto the menubar.string—
value Which menu is open, by its Menu value. Bindable.string—
onValueChange Called when the open menu changes.(value: string) => void—
loop Arrow-key focus wraps at either end.booleantrue
dir Reading direction, which flips submenu placement.'ltr' | 'rtl''ltr'

Menubar.Trigger

PropTypeDefault
class Extra classes merged onto the trigger.string—

Menubar.Content

PropTypeDefault
class Extra classes merged onto the menu panel.string—

Menu, Sub, SubTrigger, SubContent, CheckboxItem, RadioItem, RadioGroup and Arrow are re-exported from Bits unchanged.