Context Menu

Usage

Right-click here

"use client";

import { Kbd } from "@thenamespace/uikit";
import { ContextMenu } from "@thenamespace/uikit";

Anatomy

Import the ContextMenu component and access all parts using dot notation.

import { ContextMenu } from "@thenamespace/uikit";

<ContextMenu>
  <ContextMenu.Trigger />
  <ContextMenu.Popover>
    <ContextMenu.Menu>
      <ContextMenu.Section>
        <ContextMenu.Item />
      </ContextMenu.Section>
      <ContextMenu.Separator />
    </ContextMenu.Menu>
  </ContextMenu.Popover>
</ContextMenu>;

Controlled

Menu is closed

Right-click here (controlled)

"use client";

import { useState } from "react";

import { Kbd } from "@thenamespace/uikit";

Disabled

Right-click here (disabled)

"use client";

import { Kbd } from "@thenamespace/uikit";
import { ContextMenu } from "@thenamespace/uikit";

Long Press

Long-press here (touch devices)

"use client";

import { Kbd } from "@thenamespace/uikit";
import { ContextMenu } from "@thenamespace/uikit";

With Sections

Right-click here

"use client";

import { Header, Kbd } from "@thenamespace/uikit";
import { ContextMenu } from "@thenamespace/uikit";

With Selection

Right-click to change view

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

With Submenus

Right-click here

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

CSS Classes

Element Classes

.context-menu__trigger — The right-click target area. Relatively positioned inline-block with -webkit-touch-callout: none for long-press support.
.context-menu__popover — The floating menu panel positioned at the cursor. Has bg-overlay, shadow-overlay, rounded corners, and enter/exit animations.
.context-menu__menu — The list of menu items inside the popover. Flex column with gap-0.5.
.context-menu__separator — Horizontal divider between menu groups (bg-separator).

Interactive States

Entering: [data-entering="true"] on .context-menu__popover — fade-in + zoom-in-90 with placement-aware slide (150ms).
Exiting: [data-exiting="true"] on .context-menu__popover — fade-out + zoom-out-95 (100ms).
Placement slide: [data-placement="top"] slides from bottom, [data-placement="bottom"] from top, [data-placement="left"] from right, [data-placement="right"] from left.
Focus visible: .context-menu__popover[data-focus-visible="true"] — outline suppressed (outline: none).
Reduced motion: motion-reduce:animate-none on entering/exiting states.

API Reference

ContextMenu

The root provider that manages open state and cursor positioning.

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.
`isDisabled`	`boolean`	`false`	Whether the context menu is disabled.

ContextMenu.Trigger

The right-click (or long-press) target area. Renders a <div> by default.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content that can be right-clicked.
`className`	`string`	—	Additional CSS classes.

ContextMenu.Popover

The floating panel positioned at the cursor coordinates.

Prop	Type	Default	Description
`offset`	`number`	`2`	Distance from the anchor point in pixels.
`placement`	`Placement`	`"bottom start"`	Preferred placement relative to the cursor.

Also supports all RAC Popover props (except isOpen, triggerRef, and children).

ContextMenu.Menu

The list of menu items. Automatically closes the context menu when an item is selected.

Prop	Type	Default	Description
`onClose`	`() => void`	—	Custom close handler. Defaults to closing the context menu.

Also supports all RAC Menu props.

ContextMenu.Item

An individual menu item. Re-exports Namespace UIKit DropdownItem.

Also supports all Namespace UIKit DropdownItem props.

ContextMenu.ItemIndicator

Selection indicator for checkbox/radio menu items. Re-exports Namespace UIKit DropdownItemIndicator.

ContextMenu.Section

Groups related menu items. Re-exports Namespace UIKit DropdownSection.

Also supports all Namespace UIKit DropdownSection props.

ContextMenu.SubmenuTrigger

Wraps a menu item that opens a nested submenu on hover. Re-exports Namespace UIKit DropdownSubmenuTrigger.

ContextMenu.SubmenuIndicator

Chevron icon indicating a submenu. Re-exports Namespace UIKit DropdownSubmenuIndicator.

ContextMenu.Separator

A horizontal divider between menu groups.

Also supports all RAC Separator props.