Navigation

ContextMenu

Right-click menu anchored to the pointer position, driven by a declarative array of actions and separators.

Import

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

Examples

Basic

Right-click (or long-press) the area to open the menu.

Right-click here

Last action: none

const [action, setAction] = React.useState("none");

<ContextMenu
  content={[
    { label: "Back", value: "back" },
    { label: "Reload", value: "reload" },
    { separator: true },
    { label: "Inspect", value: "inspect" },
  ]}
  onSelect={setAction}
>
  <div style={{ padding: 32, border: "1px dashed gray", textAlign: "center" }}>
    Right-click here
  </div>
</ContextMenu>
<p>Last action: {action}</p>

Disabled and danger entries

File.txt — right-click

<ContextMenu
  content={[
    { label: "Rename", value: "rename" },
    { label: "Share", value: "share", disabled: true },
    { separator: true },
    { label: "Delete", value: "delete", danger: true },
  ]}
>
  <div style={{ padding: 32, border: "1px dashed gray", textAlign: "center" }}>
    File.txt — right-click
  </div>
</ContextMenu>

API

ContextMenu props

Prop	Type	Default	Description
`content` *	`ContextMenuEntry[]`	—	Menu entries: actions, nested submenus and separators (see the entry table below).
`onSelect`	`(value: string) => void`	—	Called with the picked entry's value.
`children`	`ReactNode`	—	The right-clickable target area.
`disabled`	`boolean`	`false`	Disables opening the menu.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

ContextMenuEntry props

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

Keyboard

Key	Action
`ArrowDown / ArrowUp`	Move the active item through enabled entries.
`Home / End`	Jump to the first / last enabled entry.
`Enter / Space`	Picks the active entry and closes the menu.
`ArrowRight / ArrowLeft`	Opens / closes the focused submenu level.
`Escape / Tab`	Closes the menu.