Context Menu

Presents a menu listing contextual actions or functions, typically triggered by a right-click or long-press interaction on a specific UI element. Built upon Radix UI for accessibility.

Docs API Reference

Right click here

Component Installation Guide

npx shadcn@latest add context-menu

Implementing the Context Menu

  ContextMenu, // The main container component managing the context menu state.
  ContextMenuContent, // The panel that appears, containing the menu items.
  ContextMenuItem, // Represents a single action or option within the menu.
  ContextMenuTrigger, // Wraps the element that will trigger the context menu on interaction (e.g., right-click).
} from "@/components/ui/context-menu"; // Adjust import path as needed.

// Basic structure: Wrap the trigger element and the content within ContextMenu.
<ContextMenu>
  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

In this structure, the <ContextMenuTrigger> wraps the target element. When the user performs the trigger action (usually a right-click) on this element, the <ContextMenuContent> appears, displaying the nested <ContextMenuItem> options. You can include sub-menus, separators, checkbox items, and radio groups within the content as needed, leveraging the underlying Radix UI primitives.

Command Data Table