Right click here

Context Menu

tsx

"use client";import {ContextMenu,ContextMenuCheckboxItem,ContextMenuContent,ContextMenuItem,ContextMenuLabel,ContextMenuRadioGroup,ContextMenuRadioItem,ContextMenuSeparator,ContextMenuShortcut,ContextMenuSub,ContextMenuSubContent,ContextMenuSubTrigger,ContextMenuTrigger,} from "@/components/ui/context-menu";import { useState } from "react";export function ContextMenuDemo() {const [bookmarks, setBookmarks] = useState(true);const [person, setPerson] = useState("pedro");return (  <ContextMenu>    <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">      Right click here    </ContextMenuTrigger>    <ContextMenuContent className="w-52">      <ContextMenuItem inset>        Back        <ContextMenuShortcut>⌘[</ContextMenuShortcut>      </ContextMenuItem>      <ContextMenuItem inset disabled>        Forward        <ContextMenuShortcut>⌘]</ContextMenuShortcut>      </ContextMenuItem>      <ContextMenuItem inset>        Reload        <ContextMenuShortcut>⌘R</ContextMenuShortcut>      </ContextMenuItem>      <ContextMenuSub>        <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>        <ContextMenuSubContent className="w-44">          <ContextMenuItem>Save Page...</ContextMenuItem>          <ContextMenuItem>Create Shortcut...</ContextMenuItem>          <ContextMenuSeparator />          <ContextMenuItem>Developer Tools</ContextMenuItem>        </ContextMenuSubContent>      </ContextMenuSub>      <ContextMenuSeparator />      <ContextMenuCheckboxItem        checked={bookmarks}        onCheckedChange={setBookmarks}      >        Show Bookmarks      </ContextMenuCheckboxItem>      <ContextMenuSeparator />      <ContextMenuRadioGroup value={person} onValueChange={setPerson}>        <ContextMenuLabel inset>People</ContextMenuLabel>        <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>        <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>      </ContextMenuRadioGroup>    </ContextMenuContent>  </ContextMenu>);}

Documentation

Learn Playground

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/context-menu.json"

Usage

tsx

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

tsx

<ContextMenu>
  <ContextMenuTrigger>Right click</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API

ContextMenu

Built on Radix Context Menu Root; accepts all its props.

Prop	Type	Default	Description
`onOpenChange`	`(open: boolean) => void`	none	Called when the menu opens or closes.
`modal`	`boolean`	`true`	Block interaction with the rest of the page while open.
`dir`	`"ltr" \| "rtl"`	none	Reading direction. Inherits from `DirectionProvider` when unset.

ContextMenuTrigger

The area that opens the menu on right click or long-press. Built on Radix Context Menu Trigger; accepts all its props.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Let the browser's own context menu open instead.
`asChild`	`boolean`	`false`	Render the child element instead, merging props.

ContextMenuContent

The animated menu, portaled and anchored to the pointer. Built on Radix Context Menu Content; accepts all its props.

Prop	Type	Default	Description
`alignOffset`	`number`	`0`	Offset from the pointer along the alignment axis, in pixels.
`avoidCollisions`	`boolean`	`true`	Flip and shift to stay inside the viewport.
`collisionPadding`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`	`0`	Distance from the viewport edges for collision detection.
`loop`	`boolean`	`false`	Wrap keyboard focus at the ends.

ContextMenuItem

Built on Radix Context Menu Item; accepts all its props.

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	`destructive` colors the item for dangerous actions.
`inset`	`boolean`	none	Add left padding to line up with items that have an indicator.
`onSelect`	`(event: Event) => void`	none	Called when the item is chosen. Call `event.preventDefault()` to keep the menu open.
`disabled`	`boolean`	`false`	Make the item unselectable.
`textValue`	`string`	none	Text used for typeahead when the content isn't plain text.

ContextMenuCheckboxItem

An item with a check that pops in when it's toggled. Built on Radix Context Menu CheckboxItem; accepts all its props.

Prop	Type	Default	Description
`checked`	`boolean \| "indeterminate"`	none	Checked state.
`onCheckedChange`	`(checked: boolean) => void`	none	Called when the item is toggled.
`disabled`	`boolean`	`false`	Make the item unselectable.

ContextMenuRadioGroup

Built on Radix Context Menu RadioGroup; accepts all its props.

Prop	Type	Default	Description
`value`	`string`	none	Value of the selected item.
`onValueChange`	`(value: string) => void`	none	Called when the selection changes.

ContextMenuRadioItem

An item with a dot that pops in when it's selected. Built on Radix Context Menu RadioItem; accepts all its props.

Prop	Type	Default	Description
`value`	`string`	none	Value this item selects. Required.
`disabled`	`boolean`	`false`	Make the item unselectable.

ContextMenuLabel

Built on Radix Context Menu Label; accepts all its props.

Prop	Type	Default	Description
`inset`	`boolean`	none	Add left padding to line up with items that have an indicator.

ContextMenuSub

Built on Radix Context Menu Sub; accepts all its props.

Prop	Type	Default	Description
`open`	`boolean`	none	Whether the sub-menu is open. Use when controlled.
`defaultOpen`	`boolean`	none	Whether the sub-menu starts open.
`onOpenChange`	`(open: boolean) => void`	none	Called when the sub-menu opens or closes.

ContextMenuSubTrigger

The item that opens a sub-menu, with a chevron. Built on Radix Context Menu SubTrigger; accepts all its props.

Prop	Type	Default	Description
`inset`	`boolean`	none	Add left padding to line up with items that have an indicator.
`disabled`	`boolean`	`false`	Make the trigger unselectable.

ContextMenuSubContent

The animated sub-menu. It grows from its trigger item. Built on Radix Context Menu SubContent; accepts all its props (sideOffset, alignOffset, avoidCollisions, loop).

ContextMenuGroup, ContextMenuPortal

Built on Radix Group and Portal; each accepts all its props. ContextMenuContent already renders its own portal.

ContextMenuSeparator, ContextMenuShortcut

ContextMenuSeparator is built on Radix Context Menu Separator. ContextMenuShortcut renders a native <span> for a keyboard hint. Both accept all their props.

Props match shadcn/ui Context Menu.