Navigation
Menu Inline menu list with roving focus — the base of Dropdown and Menubar popups. Items support values, icons, shortcuts, danger styling, grouping, nested submenus and checkbox/radio state.
Import import { Menu, MenuItem, MenuGroup, MenuSeparator, MenuSub, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem } from "@zephora/react"; Examples Basic `onSelect` on the Menu receives the value of any activated item.
Show code Copy
const [action, setAction] = React.useState("none");
<Menu aria-label="Actions" onSelect={setAction}>
<MenuItem value="rename">Rename</MenuItem>
<MenuItem value="duplicate">Duplicate</MenuItem>
<MenuItem value="archive" disabled>Archive</MenuItem>
</Menu>
<p>Last action: {action}</p> Groups, shortcuts and danger MenuGroup labels related items, MenuSeparator divides sections and `danger` flags destructive actions.
Show code Copy
<Menu aria-label="File actions">
<MenuGroup label="File">
<MenuItem value="new" shortcut="⌘N">New file</MenuItem>
<MenuItem value="save" shortcut="⌘S">Save</MenuItem>
</MenuGroup>
<MenuSeparator />
<MenuItem value="delete" danger shortcut="⌫">
Delete
</MenuItem>
</Menu> Submenu, checkbox and radio items MenuSub nests a submenu at arbitrary depth (opens on hover, ArrowRight or Enter). MenuCheckboxItem toggles independent state; MenuRadioItem picks one value inside a MenuRadioGroup.
Show code Copy
const [wrap, setWrap] = React.useState(true);
const [theme, setTheme] = React.useState("system");
<Menu aria-label="View options">
<MenuSub label="Export as…">
<MenuItem value="pdf">PDF</MenuItem>
<MenuItem value="png">PNG</MenuItem>
</MenuSub>
<MenuSeparator />
<MenuCheckboxItem checked={wrap} onCheckedChange={setWrap}>
Word wrap
</MenuCheckboxItem>
<MenuRadioGroup label="Theme" value={theme} onValueChange={setTheme}>
<MenuRadioItem value="light">Light</MenuRadioItem>
<MenuRadioItem value="dark">Dark</MenuRadioItem>
<MenuRadioItem value="system">System</MenuRadioItem>
</MenuRadioGroup>
</Menu> API Menu props Prop Type Default Description onSelect(value: string) => void— Called with the item value whenever an item that has a value is activated. unstyledbooleanfalseHeadless mode — inherited by items.
MenuItem props Prop Type Default Description valuestring— Value reported to the surrounding Menu onSelect. disabledboolean— Disables the item. dangerboolean— Destructive styling. iconReactNode— Element rendered before the label. shortcutstring— Keyboard shortcut hint rendered at the end. onSelect(value?: string) => void— Called when this item is activated (click / Enter / Space).
MenuSub props Prop Type Default Description label *ReactNode— Label of the submenu trigger item. iconReactNode— Element rendered before the label. disabledboolean— Disables the trigger. childrenReactNode— Submenu content: any Menu item elements — nesting depth is arbitrary.
MenuCheckboxItem props Prop Type Default Description checkedboolean— Controlled checked state. defaultCheckedbooleanfalseInitial checked state (uncontrolled). onCheckedChange(checked: boolean) => void— Called with the new checked state. disabledboolean— Disables the item. iconReactNode— Element rendered before the label. shortcutstring— Keyboard shortcut hint rendered at the end.
MenuRadioGroup props Prop Type Default Description valuestring— Controlled selected value. defaultValuestring— Initial selected value (uncontrolled). onValueChange(value: string) => void— Called with the picked item value. labelReactNode— Group heading rendered above the items.
MenuRadioItem props Prop Type Default Description value *string— Value this radio item represents inside its MenuRadioGroup. disabledboolean— Disables the item. iconReactNode— Element rendered before the label. shortcutstring— Keyboard shortcut hint rendered at the end.
MenuGroup props Prop Type Default Description labelReactNode— Group heading rendered above the items.
Keyboard Key Action ArrowDown / ArrowUpMove focus to the next / previous enabled item. Home / EndFocus the first / last enabled item. Enter / SpaceActivates the focused item. ArrowRight / EnterOn a MenuSub trigger: opens the submenu and focuses its first item. ArrowLeft / EscapeInside a submenu: closes that level and returns focus to its trigger.