Context Menu
Displays a menu of actions triggered by a right-click.
When to use
Add ContextMenu as a secondary shortcut to actions that are already reachable another way, typically on a table row or a card. Right-click is not discoverable and does not exist on touch, so it must never be the only route to an action: pair it with the same items behind a DropdownMenu trigger.
Platform notes
The trigger has to look like a target, which is why the demo gives it a dashed border and text-muted-foreground; an unmarked region leaves users with no way to know a menu exists. inset aligns items that have no icon with items that do, so keep it consistent inside a group instead of mixing the two. Keyboard users open it with the context-menu key or Shift+F10, meaning every action here must be operable from the keyboard alone to meet WCAG 2.2 AA. Item text and the ContextMenuShortcut labels come from react-i18next, and the destructive entry uses variant="destructive" rather than a hand-picked colour.
Install
npx shadcn@latest add context-menuCode
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
export function ContextMenuDemo() {
return (
<ContextMenu>
<ContextMenuTrigger asChild>
<div className="flex h-40 w-full max-w-sm items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
Right-click here
</div>
</ContextMenuTrigger>
<ContextMenuContent className="w-64">
<ContextMenuItem inset>
Back <ContextMenuShortcut>⌘[</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem inset disabled>
Forward <ContextMenuShortcut>⌘]</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>
Reload <ContextMenuShortcut>⌘R</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem variant="destructive">
Delete <ContextMenuShortcut>⌫</ContextMenuShortcut>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
}