Navigation

Menubar

Horizontal menubar of dropdown menus following the WAI-ARIA menubar pattern, driven by a declarative items array.

Import

import { Menubar } from "@zephora/react";

Examples

Basic

`onSelect` receives the menu label and the activated item value.

Last: none

const [last, setLast] = React.useState("none");

<Menubar
  items={[
    {
      label: "File",
      items: [
        { label: "New", value: "new" },
        { label: "Open…", value: "open" },
        { label: "Save", value: "save" },
      ],
    },
    {
      label: "Edit",
      items: [
        { label: "Undo", value: "undo" },
        { label: "Redo", value: "redo", disabled: true },
      ],
    },
    {
      label: "View",
      items: [{ label: "Zoom in", value: "zoom-in" }],
    },
  ]}
  onSelect={(menu, value) => setLast(menu + " → " + value)}
/>
<p>Last: {last}</p>

Disabled items

Individual entries can be disabled; they are skipped by keyboard navigation.

<Menubar
  items={[
    {
      label: "Project",
      items: [
        { label: "Build", value: "build" },
        { label: "Deploy", value: "deploy", disabled: true },
      ],
    },
  ]}
/>

API

Menubar props

Prop	Type	Default	Description
`items` *	`MenubarMenuData[]`	—	Top-level menus: { label, items: MenubarEntry[] }.
`onSelect`	`(menuLabel: string, value: string) => void`	—	Called with the menu label and the activated item value.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

MenubarEntry props

Prop	Type	Default	Description
`label` *	`string`	—	Item label.
`value`	`string`	—	Reported to onSelect. Optional for entries that only open a submenu.
`disabled`	`boolean`	—	Disables the entry.
`icon`	`ReactNode`	—	Element rendered before the label.
`shortcut`	`string`	—	Keyboard shortcut hint rendered at the end.
`items`	`MenubarEntry[]`	—	Nested entries — renders this item as a submenu (arbitrary depth).
`separator`	`true`	—	Pass { separator: true } as an entry to render a divider instead.

Keyboard

Key	Action
`ArrowRight / ArrowLeft`	Move between top-level triggers; with a menu open, switch to the adjacent menu.
`ArrowDown / ArrowUp`	On a trigger: open its menu. Inside a menu: move between items.
`Home / End`	Focus the first / last top-level trigger.
`Enter / Space`	Activates the focused item.
`Escape`	Closes the open menu and returns focus to its trigger.