Context Menu

Displays a menu of actions triggered by a right-click (or long-press on touch devices).

Installation

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Anatomy

<ContextMenu>
  <ContextMenuTrigger />
  <ContextMenuContent>
    <ContextMenuGroup>
      <ContextMenuLabel />
      <ContextMenuItem />
      <ContextMenuItem />
    </ContextMenuGroup>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger />
      <ContextMenuSubContent>
        <ContextMenuGroup>
          <ContextMenuItem />
        </ContextMenuGroup>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuCheckboxItem />
  </ContextMenuContent>
</ContextMenu>

Examples

Default

A context menu with groups, shortcuts, submenus, checkbox items, and a destructive action.

<ContextMenu>
<ContextMenuTrigger>
  Right click here
</ContextMenuTrigger>
<ContextMenuContent>
  <ContextMenuGroup>
    <ContextMenuLabel title="Action" />
    <ContextMenuItem label="Back">
      <ContextMenuShortcut>⌘[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem label="Reload">
      <ContextMenuShortcut>⌘R</ContextMenuShortcut>
    </ContextMenuItem>
  </ContextMenuGroup>
  <ContextMenuSeparator />
  <ContextMenuCheckboxItem checked label="Show Bookmarks" />
</ContextMenuContent>
</ContextMenu>

<ContextMenu><ContextMenuTrigger>  Right click here</ContextMenuTrigger><ContextMenuContent>  <ContextMenuGroup>    <ContextMenuLabel title="Action" />    <ContextMenuItem label="Back">      <ContextMenuShortcut>⌘[</ContextMenuShortcut>    </ContextMenuItem>    <ContextMenuItem label="Reload">      <ContextMenuShortcut>⌘R</ContextMenuShortcut>    </ContextMenuItem>  </ContextMenuGroup>  <ContextMenuSeparator />  <ContextMenuCheckboxItem checked label="Show Bookmarks" /></ContextMenuContent></ContextMenu>

API Reference

ContextMenu

The root component. Wraps the trigger and content.

ContextMenuTrigger

The area that activates the context menu on right-click or long-press.

Prop	Type	Default	Description
`render`	`React.ReactElement \| (props, state) => React.ReactElement`	-	Renders a custom trigger element and merges trigger props onto it.

ContextMenuContent

The popover panel that appears at the pointer position.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	-	Forces the panel to a specific side.

ContextMenuItem

A single actionable item in the menu. Extends the shared MenuItem props.

Prop	Type	Default	Description
`label`	`React.ReactNode`	-	The label text or content of the item.
`icon`	`React.ReactNode`	-	An optional leading icon.
`desc`	`string`	-	An optional description below the label.
`variant`	`"default" \| "secondary" \| "sidebar" \| "warning" \| "error"`	`"default"`	The visual style of the item.
`disabled`	`boolean`	-	Whether the item is disabled.
`onClick`	`React.MouseEventHandler<HTMLElement>`	-	Handler called when the item is clicked.