Command Palette

Search for a command to run...

Context Menu

shadcn/ui

Displays a menu to the user triggered by right-clicking or long-pressing.

Right click here to see the context menu

import {	ContextMenu,	ContextMenuCheckboxItem,	ContextMenuContent,	ContextMenuItem,	ContextMenuLabel,	ContextMenuRadioGroup,	ContextMenuRadioItem,	ContextMenuSeparator,	ContextMenuShortcut,	ContextMenuSub,	ContextMenuSubContent,	ContextMenuSubTrigger,	ContextMenuTrigger,} from "@/registry/optics/context-menu";<ContextMenu>    <ContextMenuTrigger>		<div className="bg-muted rounded-lg p-8 border border-dashed flex items-center justify-center">			<p className="text-muted-foreground text-sm select-none">				Right click here to see the context menu			</p>		</div>    </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>            	<ContextMenuItem>Name Window...</ContextMenuItem>            	<ContextMenuSeparator />            	<ContextMenuItem>Developer Tools</ContextMenuItem>            	<ContextMenuSeparator />            	<ContextMenuItem variant="destructive">Delete</ContextMenuItem>        	</ContextMenuSubContent>        </ContextMenuSub>        <ContextMenuSeparator />        <ContextMenuCheckboxItem checked>        	Show Bookmarks        </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>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/context-menu.json

Props

This component includes multiple sub-components for building context menus.

<ContextMenu />
Name
Type
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
modal
boolean (default: true)

<ContextMenuTrigger />
Name
Type
No specific props. Accepts standard Radix ContextMenu.Trigger props.
<ContextMenuContent />
Name
Type
className
string
<ContextMenuItem />
Name
Type
className
string
inset
boolean
variant
"default" | "destructive" (default: "default")
disabled
boolean
<ContextMenuCheckboxItem />
Name
Type
className
string
checked
boolean
children
React.ReactNode
<ContextMenuRadioItem />
Name
Type
className
string
children
React.ReactNode
<ContextMenuRadioGroup />
Name
Type
No specific props. Accepts standard Radix ContextMenu.RadioGroup props.
<ContextMenuLabel />
Name
Type
className
string
inset
boolean
<ContextMenuSeparator />
Name
Type
className
string
<ContextMenuShortcut />
Name
Type
className
string
<ContextMenuGroup />
Name
Type
No specific props. Accepts standard Radix ContextMenu.Group props.
<ContextMenuPortal />
Name
Type
No specific props. Accepts standard Radix ContextMenu.Portal props.
<ContextMenuSub />
Name
Type
No specific props. Accepts standard Radix ContextMenu.Sub props.
<ContextMenuSubTrigger />
Name
Type
className
string
inset
boolean
children
React.ReactNode
<ContextMenuSubContent />
Name
Type
className
string
sideOffset
number (default: 2)
align
"start" | "center" | "end" (default: "start")
alignOffset
number (default: -4)
CommandData Table