Context Menu

import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuItem,
	ContextMenuSeparator,
	ContextMenuSub,
	ContextMenuSubContent,
	ContextMenuSubTrigger,
	ContextMenuTrigger,
} from "@/lib/components/ui/context-menu";

export default function ContextMenuDemo() {
	return ContextMenu(
		ContextMenuTrigger(
			{
				class:
					"flex h-36 w-full max-w-sm items-center justify-center rounded-md border border-dashed text-sm select-none",
			},
			"Right click here",
		),
		ContextMenuContent(
			{ class: "w-52" },
			ContextMenuItem({ onSelect: () => console.log("back") }, "Back"),
			ContextMenuItem({ disabled: true }, "Forward"),
			ContextMenuItem({ onSelect: () => console.log("reload") }, "Reload"),
			ContextMenuSeparator(),
			ContextMenuSub(
				ContextMenuSubTrigger("Share"),
				ContextMenuSubContent(
					{ class: "w-44" },
					ContextMenuItem({ onSelect: () => console.log("share-email") }, "Email"),
					ContextMenuItem({ onSelect: () => console.log("share-message") }, "Message"),
					ContextMenuItem({ onSelect: () => console.log("share-link") }, "Copy link"),
				),
			),
			ContextMenuSeparator(),
			ContextMenuItem({ onSelect: () => console.log("save") }, "Save page as…"),
			ContextMenuItem({ onSelect: () => console.log("print") }, "Print…"),
			ContextMenuSeparator(),
			ContextMenuItem({ onSelect: () => console.log("inspect") }, "Inspect"),
		),
	);
}

A context menu opens where the pointer is when an area is right-clicked (or long-pressed on touch). ContextMenu is the root, ContextMenuTrigger the area, and ContextMenuContent the panel. It shares its content, items, and keyboard model with Dropdown Menu and Menubar — only how the menu opens differs.

import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuItem,
	ContextMenuTrigger,
} from "@implementjs/primitives";

ContextMenu(
	ContextMenuTrigger({ class: "block h-36 rounded-md border border-dashed" }, "Right click here"),
	ContextMenuContent(
		ContextMenuItem({ onSelect: () => reload() }, "Reload"),
		ContextMenuItem({ onSelect: () => inspect() }, "Inspect"),
	),
);

Each part accepts optional props and children — pass a props object when you need attributes, or pass children directly. See createComponent.

Opening

The trigger intercepts the contextmenu event, so the browser menu is replaced inside the area. The panel anchors to the pointer position — right-clicking somewhere else while open moves it there. On touch, a long press (700ms) opens it. Pass disabled on the trigger to fall back to the native browser menu. While open, the page behind cannot scroll; pass preventScroll: false on the root to leave it scrollable.

Items, structure, and keyboard

Everything inside the panel is the shared menu set: ContextMenuItem with onSelect and closeOnSelect, ContextMenuCheckboxItem, ContextMenuRadioGroup and ContextMenuRadioItem, ContextMenuGroup with ContextMenuGroupHeading, ContextMenuSeparator, and nested submenus via ContextMenuSub, ContextMenuSubTrigger, and ContextMenuSubContent. The keyboard model matches the dropdown menu: arrows move, typing jumps, Enter and Space activate, ArrowRight and ArrowLeft enter and leave submenus, Escape closes.

Styling

The primitive does not hide the closed panel — style ContextMenuContent against data-state, and items against data-highlighted and data-disabled. Every part sets a data-context-menu-* attribute, and the trigger exposes data-state so the area itself can react while the menu is open.

API Reference