Menubar

Desktop-style menu bar on the WAI-ARIA menubar pattern: one menu open at a time, hovering the next title while one is open switches to it, ← → walk the bar with or without a menu open, one Tab stop. A single highlight springs between titles; menus reuse every DropdownMenu item.

npx @kznlabs/labsui add menubar

"use client";import { useState } from "react";import {  Menubar,  MenubarCheckboxItem,  MenubarContent,  MenubarItem,  MenubarMenu,  MenubarSeparator,  MenubarTrigger,} from "@/components/ui/menubar";export function EditorMenubar({  onNew,  onExport,}: {  onNew: () => void;  onExport: () => void;}) {  const [sidebar, setSidebar] = useState(true);  return (    <Menubar aria-label="Editor">      <MenubarMenu>        <MenubarTrigger>File</MenubarTrigger>        <MenubarContent>          <MenubarItem shortcut="⌘N" onSelect={onNew}>            New clip          </MenubarItem>          <MenubarSeparator />          <MenubarItem shortcut="⌘E" onSelect={onExport}>            Export          </MenubarItem>        </MenubarContent>      </MenubarMenu>      <MenubarMenu>        <MenubarTrigger>View</MenubarTrigger>        <MenubarContent>          <MenubarCheckboxItem checked={sidebar} onCheckedChange={setSidebar}>            Show sidebar          </MenubarCheckboxItem>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}

<Menubar>

Desktop-style menu bar: one menu open at a time, hovering another title while one is open switches to it, Left/Right move between menus (open or not). One highlight springs between titles.

Also accepts every <div> prop (none of its own).

<MenubarContent>

children*
ReactNode
Items, labels, groups and separators.
aligndefault "start"
"start" | "end"
Edge of the trigger the menu lines up with.

Prop	Type	Default
`children*` Items, labels, groups and separators.	`ReactNode`	—
`align` Edge of the trigger the menu lines up with.	`"start" \| "end"`	`"start"`

<MenubarItem>

children*
ReactNode
Label, optionally with a leading icon.
disabled
boolean
Shown but not selectable.
onSelect
() => void
Called on click or Enter; the menu then closes.
shortcut
string
Right-aligned hint, e.g. "⌘S".
variantdefault "default"
"default" | "destructive"
"destructive": red, for irreversible actions.

Prop	Type	Default
`children*` Label, optionally with a leading icon.	`ReactNode`	—
`disabled` Shown but not selectable.	`boolean`	—
`onSelect` Called on click or Enter; the menu then closes.	`() => void`	—
`shortcut` Right-aligned hint, e.g. "⌘S".	`string`	—
`variant` "destructive": red, for irreversible actions.	`"default" \| "destructive"`	`"default"`

<MenubarCheckboxItem>

checked*
boolean
Shows the check mark.
children*
ReactNode
Label, optionally with a leading icon.
onCheckedChange*
(checked: boolean) => void
Called with the new state.
disabled
boolean
Shown but not selectable.
shortcut
string
Right-aligned hint, e.g. "⌘S".

Prop	Type	Default
`checked*` Shows the check mark.	`boolean`	—
`children*` Label, optionally with a leading icon.	`ReactNode`	—
`onCheckedChange*` Called with the new state.	`(checked: boolean) => void`	—
`disabled` Shown but not selectable.	`boolean`	—
`shortcut` Right-aligned hint, e.g. "⌘S".	`string`	—

<MenubarRadioGroup>

children*
ReactNode
DropdownMenuRadioItems.
onValueChange*
(value: string) => void
Called with the picked item's value.
value*
string
Value of the checked item.

Prop	Type	Default
`children*` `DropdownMenuRadioItem`s.	`ReactNode`	—
`onValueChange*` Called with the picked item's value.	`(value: string) => void`	—
`value*` Value of the checked item.	`string`	—

<MenubarRadioItem>

children*
ReactNode
Label, optionally with a leading icon.
value*
string
Checked when it equals the group's value.
disabled
boolean
Shown but not selectable.

Prop	Type	Default
`children*` Label, optionally with a leading icon.	`ReactNode`	—
`value*` Checked when it equals the group's `value`.	`string`	—
`disabled` Shown but not selectable.	`boolean`	—

<MenubarLabel>

Also accepts every <div> prop (none of its own).

<MenubarSeparator>

<MenubarMenu>

One title and its menu. value is optional; give one to tell menus apart in tests or analytics.

children*
ReactNode
MenubarTrigger and MenubarContent.
value
string
Stable id for the menu; one is generated if omitted.

Prop	Type	Default
`children*` `MenubarTrigger` and `MenubarContent`.	`ReactNode`	—
`value` Stable id for the menu; one is generated if omitted.	`string`	—

<MenubarTrigger>

A menu title. Click toggles; Down, Enter or Space opens on the first item, Up on the last.

Also accepts every <button> prop (none of its own).

* required. Every component also takes className.