Menu Bar

Application menu bar (File / Edit / View). Click a trigger to open its menu, then hover other triggers to switch instantly between them.

Features

Click to open, hover between triggers to switch.

Only one menu open at a time (controlled by Root’s value).

Closes on outside click or Escape.

Items, separators, and per-item disabled state.

Controlled or uncontrolled open menu.

Example

Anatomy


import { MenuBar } from '@wire-ui/react'
 
<MenuBar.Root>
<MenuBar.Menu value="file">
<MenuBar.Trigger>File</MenuBar.Trigger>
<MenuBar.Content>
  <MenuBar.Item onSelect={() => {}}>New</MenuBar.Item>
  <MenuBar.Item onSelect={() => {}}>Open</MenuBar.Item>
  <MenuBar.Separator />
  <MenuBar.Item onSelect={() => {}}>Quit</MenuBar.Item>
</MenuBar.Content>
</MenuBar.Menu>
<MenuBar.Menu value="edit">
<MenuBar.Trigger>Edit</MenuBar.Trigger>
<MenuBar.Content>
  <MenuBar.Item>Undo</MenuBar.Item>
  <MenuBar.Item>Redo</MenuBar.Item>
</MenuBar.Content>
</MenuBar.Menu>
</MenuBar.Root>

Styling

Both Menu and Trigger expose data-state. Use it to highlight the open trigger and animate the open menu.


<MenuBar.Trigger className="
  data-[state=open]:bg-[#f5f5f5]
  data-[focus-visible]:ring-2 data-[focus-visible]:ring-black
">
  File
</MenuBar.Trigger>

Using data attributes


[data-state="open"]  { background: #f5f5f5; }
[data-state="closed"] { /* default */ }
[data-disabled]      { opacity: 0.4; cursor: not-allowed; }

Root props

Prop	Type	Default	Description
`value`	`string \| null`	—	Controlled open menu id
`defaultValue`	`string \| null`	`null`	Initial open menu (uncontrolled)
`onValueChange`	`(value: string \| null) => void`	—	Called when the open menu changes

Prop	Type	Description
`value`	`string`	Unique id matching Root’s `value`

Trigger props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disables this trigger

Item props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disables this item
`onSelect`	`() => void`	—	Called when the item is selected (also closes the menu)

Data attributes

Attribute	Element	Values
`data-state`	Menu, Trigger, Content	`"open"` / `"closed"`
`data-disabled`	Trigger, Item	Present when disabled
`data-hover` / `data-active` / `data-focus-visible`	Trigger, Item	Standard interactive states

Root sets role="menubar". Trigger sets aria-haspopup="menu" and aria-expanded. Content sets role="menu". Items set role="menuitem". Separator sets role="separator".

Accessibility

Hovering a trigger while another menu is open switches to that menu — matches native application menu behaviour.
Outside click or Escape closes the open menu.
Items are keyboard-activatable via Enter or Space.

Keyboard Interactions

Key	Description
`Enter`	Activates the focused trigger or item.
`Space`	Activates the focused trigger or item.
`Tab`	Moves focus to the next trigger or item.
`Escape`	Closes the open menu.