);
}
```
### Labels and icons
Radio groups with a label, checkbox items with shortcuts, and icon items that depend on them.
```tsx
"use client";
import * as React from "react";
import { ListMusic, Repeat, Shuffle } from "@/components/ui/icons";
import {
Menubar,
MenubarCheckboxItem,
MenubarContent,
MenubarItem,
MenubarLabel,
MenubarMenu,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSeparator,
MenubarTrigger,
} from "@/components/ui/menubar";
export default function MenubarPlayer() {
const [shuffle, setShuffle] = React.useState(false);
const [repeat, setRepeat] = React.useState("all");
const [output, setOutput] = React.useState("studio");
return (
ControlsPlayNext trackPrevious track
Shuffle
RepeatOffAllOneOutputStudio monitorsAna’s AirPods ProKitchen speakerLibrary}>New playlist
} disabled={!shuffle}>
Reshuffle queue
}>Show listening history
);
}
```
## API reference
### Menubar
Renders a div with role="menubar". Give it an aria-label.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string \| null` | — | The open menu's value. Controlled. |
| `defaultValue` | `string \| null` | `null` | Initially open menu when uncontrolled. |
| `onValueChange` | `(value: string \| null) => void` | — | Called when a menu opens, another takes over, or the bar closes. |
| `loop` | `boolean` | `true` | Left and Right wrap from the last menu to the first and back. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
### MenubarMenu
One menu in the bar. Wraps a DropdownMenu whose open state the bar owns.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | `generated` | Identifies the menu in Menubar's value. |
### MenubarTrigger
The menu's title: a button with role="menuitem". Accepts native button attributes.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `disabled` | `boolean` | `false` | Skipped by Left and Right. |
### MenubarContent
The menu panel. Takes every DropdownMenuContent prop.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `sideOffset` | `number` | `8` | Gap below the bar, in px. |
| `alignOffset` | `number` | `-4` | Lines the panel's edge up with the bar's. |
### MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarLabel, MenubarGroup, MenubarSeparator, MenubarSub, MenubarSubTrigger, MenubarSubContent
The Dropdown Menu parts under menubar names, with the same props: shortcut, icon, variant="danger", checked, value, onSelect.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shortcut` | `ReactNode` | — | Shown on the right. Display only: wire the key yourself. |
| `onSelect` | `(event: Event) => void` | — | Called on click, Enter or Space. The menu closes unless you call preventDefault(). |
## Accessibility
- Follows the WAI-ARIA menubar pattern: one Tab stop for the bar, Left and Right between titles, Home and End to the ends.
- Enter, Space or ArrowDown opens a menu on its first item; ArrowUp opens it on the last.
- Inside a menu, Left and Right move to the neighbouring menu, except where a submenu claims the key.
- Once a menu is open, hovering another title opens that one. Escape closes the menu and returns focus to its title.
## Source
`components/ui/menubar.tsx`
```tsx
"use client";
import * as React from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
type DropdownMenuContentProps,
type DropdownMenuTriggerProps,
} from "@/components/ui/dropdown-menu";
const EASE = [0.23, 1, 0.32, 1] as const;
const TRIGGER = "[data-nk-menubar-trigger]:not([disabled])";
const ITEM = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
type Intent = "first" | "last" | "menu";
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
interface MenubarContextValue {
/** The open menu, or null when the bar is at rest. */
value: string | null;
openMenu: (key: string, intent?: Intent) => void;
/** Where focus should land when the next menu opens; kept until the one after. */
setIntent: (intent: Intent) => void;
closeMenu: (key: string) => void;
/** Which trigger is the bar's single Tab stop. */
tabStop: string | null;
setTabStop: (key: string) => void;
readIntent: () => Intent;
barRef: React.RefObject;
barId: string;
loop: boolean;
}
const MenubarContext = React.createContext(null);
function useMenubar(component: string) {
const context = React.useContext(MenubarContext);
if (!context) throw new Error(`<${component}> must be rendered inside .`);
return context;
}
interface MenuContextValue {
key: string;
open: boolean;
triggerRef: React.MutableRefObject;
}
const MenuContext = React.createContext(null);
function useMenubarMenu(component: string) {
const context = React.useContext(MenuContext);
if (!context) throw new Error(`<${component}> must be rendered inside .`);
return context;
}
function triggersOf(bar: HTMLElement | null) {
return bar ? Array.from(bar.querySelectorAll(TRIGGER)) : [];
}
export interface MenubarProps extends Omit, "color" | "defaultValue"> {
/** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
color?: NeonColor;
/** The open menu's value. Controlled; null when every menu is closed. */
value?: string | null;
defaultValue?: string | null;
onValueChange?: (value: string | null) => void;
/** Left and Right wrap from the last menu to the first and back. */
loop?: boolean;
}
const Menubar = React.forwardRef(
(
{ className, style, color, value: valueProp, defaultValue = null, onValueChange, loop = true, children, ...props },
forwardedRef,
) => {
const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
const isControlled = valueProp !== undefined;
const value = isControlled ? valueProp : uncontrolled;
const [tabStop, setTabStop] = React.useState(null);
const intent = React.useRef("menu");
const barRef = React.useRef(null);
const barId = React.useId();
// Closing one menu and opening another can land in the same event (a click on the next
// title closes the current menu as an outside click), so track the latest value here.
const latest = React.useRef(value);
useIsomorphicLayoutEffect(() => {
latest.current = value;
}, [value]);
const commit = React.useCallback(
(next: string | null) => {
if (next === latest.current) return;
latest.current = next;
if (!isControlled) setUncontrolled(next);
onValueChange?.(next);
},
[isControlled, onValueChange],
);
const context = React.useMemo(
() => ({
value,
openMenu: (key, nextIntent) => {
if (nextIntent) intent.current = nextIntent;
commit(key);
},
setIntent: (next) => {
intent.current = next;
},
closeMenu: (key) => {
if (latest.current !== key) return;
intent.current = "menu";
commit(null);
},
tabStop,
setTabStop,
// Read, not consumed: dev StrictMode runs the focus effect twice and both runs must agree.
readIntent: () => intent.current,
barRef,
barId,
loop,
}),
[value, commit, tabStop, barId, loop],
);
// Until a trigger has been focused, the first one is the Tab stop.
React.useEffect(() => {
if (tabStop !== null) return;
const first = triggersOf(barRef.current)[0];
if (first?.dataset.nkMenubarTrigger) setTabStop(first.dataset.nkMenubarTrigger);
}, [tabStop]);
return (