Skip to content

Twentyfirst UIPro

HaloPro

Menubar

Navigation · Menubar, Menu

View as Markdown

A desktop-style row of menus (File, Edit, View). Each menu is a regular Menu, so items can have icons, shortcuts, checkbox and radio states and submenus.

Keyboard: ←/→ move between menus (and switch the open one), ↓/Enter/Space open, ↑/↓ move inside, → and ← open and close submenus, Escape closes and returns to the bar.
Moving the pointer across the bar switches menus once one is open.

PreviewCode

Props

Menubar

Prop	Type	Notes
`menus`	`MenubarMenu[]`	Required
`label?`	`string`	Accessible name of the bar.
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`items`	`(MenuItem \| "-")[]`	Required
`label?`	`string`	Accessible name of the menu.
`autoFocus?`	`boolean`	Focus the first item on mount (menus opened from a button or the keyboard).
`onClose?`	`() => void`	Called after an item runs, and on Escape, so the owner can close the menu.
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.