Context Menu

Displays a menu on right-click or long-press.

Installation

bash
npx shadcn@latest add context-menu

Import

import {  ContextMenu,  ContextMenuTrigger,  ContextMenuContent,  ContextMenuItem,  ContextMenuCheckboxItem,  ContextMenuRadioItem,  ContextMenuLabel,  ContextMenuSeparator,  ContextMenuShortcut,  ContextMenuGroup,  ContextMenuSub,  ContextMenuSubContent,  ContextMenuSubTrigger,  ContextMenuRadioGroup,} from "@/components/ui/context-menu"

Basic

<ContextMenu>  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">    Right click here  </ContextMenuTrigger>  <ContextMenuContent className="w-64">    <ContextMenuItem inset>      Back <ContextMenuShortcut>Cmd+[</ContextMenuShortcut>    </ContextMenuItem>    <ContextMenuItem inset disabled>      Forward <ContextMenuShortcut>Cmd+]</ContextMenuShortcut>    </ContextMenuItem>    <ContextMenuItem inset>      Reload <ContextMenuShortcut>Cmd+R</ContextMenuShortcut>    </ContextMenuItem>    <ContextMenuSeparator />    <ContextMenuSub>      <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>      <ContextMenuSubContent className="w-48">        <ContextMenuItem>Save Page As... <ContextMenuShortcut>Shift+Cmd+S</ContextMenuShortcut></ContextMenuItem>        <ContextMenuItem>Developer Tools</ContextMenuItem>      </ContextMenuSubContent>    </ContextMenuSub>    <ContextMenuSeparator />    <ContextMenuCheckboxItem checked>Show Bookmarks Bar</ContextMenuCheckboxItem>    <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>    <ContextMenuSeparator />    <ContextMenuRadioGroup value="pedro">      <ContextMenuLabel inset>People</ContextMenuLabel>      <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>      <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>    </ContextMenuRadioGroup>  </ContextMenuContent></ContextMenu>

Props

PROPTYPEDEFAULTDESCRIPTION
modalbooleantrueOn ContextMenu — whether to render as modal
onOpenChange(open: boolean) => void—Called when menu opens/closes
align"start" | "center" | "end"—On ContextMenuContent — alignment
sideOffsetnumber—On ContextMenuContent — offset
insetbooleanfalseOn items — adds left padding to align with items that have icons

Notes

  • Make the trigger area visually obvious \u2014 use border-dashed with instructional text
  • Same composition API as DropdownMenu \u2014 skills transfer directly
  • Long-press triggers the menu on touch devices