Context Menu

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

Context Menu

import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@/components/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      disabled      inset    >      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>

import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@/components/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      disabled      inset    >      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 @optics/context-menu

Props

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
align	string(default: start)
alignOffset	number(default: 4)
side	string(default: right)
sideOffset	number(default: 0)
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
inset	boolean(default: false)
variant	string(default: default)
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
inset	boolean(default: false)
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
inset	boolean(default: false)
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
render	React.ReactElement
keepMounted	boolean
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
finalFocus	boolean \| HTMLElement
label	string
closeOnClick	boolean
nativeButton	boolean
onCheckedChange	(...args) => void
onValueChange	(...args) => void
onOpenChange	(...args) => void
closeParentOnEsc	boolean
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
onOpenChangeComplete	((open: boolean) => void)
open	boolean
triggerId	string
defaultTriggerId	string
delay	number
closeDelay	number
openOnHover	boolean

Command Data Table

Context Menu

Show Code

Installation

Props

Show LessShow More