Overlays/Menubar

Menubar

A horizontal bar of menu buttons, each opening its own dropdown of actions, like a desktop application's File/Edit/View menu bar. Hovering another menu button while one is open switches directly to it.

import { Menubar, MenubarMenu } from "@animui/ui"

Basic

Disabled items

Props

Menubar

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	One or more MenubarMenu elements.
`className`	`string`	—	Additional classes for the menubar container.

MenubarMenu

Prop	Type	Default	Description
`label`	`string`	—	The text shown on the menu's trigger button.
`items`	`DropdownMenuItem[]`	—	The list of menu items to render when open.
`className`	`string`	—	Additional classes for the trigger button.

Accessibility

✓Each menu trigger exposes aria-haspopup and aria-expanded.
✓Menu items are rendered with role="menuitem" inside a role="menu" container.
✓Closes on outside click or the Escape key.