Layout UI

Context Menu

A menu triggered by right-click or long-press on a target area, built on Base UI ContextMenu. Shares the same item family as DropdownMenu.

Preview

Right-click here

Installation

bash
npx shadcn@latest add @layout/context-menu

Usage

tsx
import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "@/components/ui/context-menu";

Examples

With checkboxes

Right-click for formatting

Radio group

Right-click to change view

Guidelines for AI agents

Use for secondary actions on an element that the user already has focus on (file list rows, canvas objects, code editor). Wrap the target in ContextMenuTrigger. Mirror the same item structure as DropdownMenu for consistency.

Never

  • Neveruse ContextMenu as the only way to reach critical actions; it must complement visible controls
  • Neveruse ContextMenu instead of DropdownMenu for button-triggered menus
  • Neverplace more than eight items at the top level; group into sections with separators
  • Neverhardcode colours; use the variant prop for destructive actions

Tokens consumed

--layout-overlay--layout-overlay-fg--layout-accent--layout-accent-fg--layout-danger--layout-border--layout-radius--layout-shadow-md--layout-duration-base