Context Menu

Right click here

<ContextMenu>  <ContextMenuTrigger className="flex h-32 w-full items-center justify-center rounded-md border border-dashed text-xs text-fg-muted select-none">    Right click here  </ContextMenuTrigger>  <ContextMenuContent className="w-48">    <ContextMenuLabel>Actions</ContextMenuLabel>    <ContextMenuSeparator />    <ContextMenuItem>Profile</ContextMenuItem>    <ContextMenuItem>Settings</ContextMenuItem>  </ContextMenuContent></ContextMenu>

Usage

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@reva/ui";

ContextMenu mirrors the DropdownMenu API surface (item, separator, label, sub-menu, checkbox-item, radio-item, shortcut). The trigger area is the element the user right-clicks; the menu opens at the pointer.

Composition

Use the following composition to build a ContextMenu:

ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
    ├── ContextMenuLabel
    ├── ContextMenuSeparator
    ├── ContextMenuItem
    │   └── ContextMenuShortcut
    ├── ContextMenuCheckboxItem
    ├── ContextMenuRadioGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuRadioItem
    │   └── ContextMenuRadioItem
    └── ContextMenuSub
        ├── ContextMenuSubTrigger
        └── ContextMenuSubContent
            ├── ContextMenuItem
            └── ContextMenuItem

Examples

Basic

Right click here

<ContextMenu>  <ContextMenuTrigger className="flex h-32 w-full items-center justify-center rounded-md border border-dashed text-xs text-fg-muted select-none">    Right click here  </ContextMenuTrigger>  <ContextMenuContent className="w-48">    <ContextMenuLabel>Actions</ContextMenuLabel>    <ContextMenuSeparator />    <ContextMenuItem>Profile</ContextMenuItem>    <ContextMenuItem>Settings</ContextMenuItem>  </ContextMenuContent></ContextMenu>

With shortcuts

Right click here

<ContextMenu>  <ContextMenuTrigger className="flex h-32 w-full items-center justify-center rounded-md border border-dashed text-xs text-fg-muted select-none">    Right click here  </ContextMenuTrigger>  <ContextMenuContent className="w-56">    <ContextMenuItem>      Back      <ContextMenuShortcut>⌘[</ContextMenuShortcut>    </ContextMenuItem>    <ContextMenuItem>      Forward      <ContextMenuShortcut>⌘]</ContextMenuShortcut>    </ContextMenuItem>    <ContextMenuItem>      Reload      <ContextMenuShortcut>⌘R</ContextMenuShortcut>    </ContextMenuItem>  </ContextMenuContent></ContextMenu>

Sub-menus

Right click here

<ContextMenu>  <ContextMenuTrigger className="flex h-32 w-full items-center justify-center rounded-md border border-dashed text-xs text-fg-muted select-none">    Right click here  </ContextMenuTrigger>  <ContextMenuContent className="w-56">    <ContextMenuItem>New tab</ContextMenuItem>    <ContextMenuItem>New window</ContextMenuItem>    <ContextMenuSeparator />    <ContextMenuSub>      <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>      <ContextMenuSubContent className="w-40">        <ContextMenuItem>Email</ContextMenuItem>        <ContextMenuItem>Message</ContextMenuItem>        <ContextMenuItem>Copy link</ContextMenuItem>      </ContextMenuSubContent>    </ContextMenuSub>  </ContextMenuContent></ContextMenu>

Checkbox and radio items

ContextMenuCheckboxItem and ContextMenuRadioGroup are controlled — drive them with useState (or any state source) via checked/onCheckedChange and value/onValueChange.

Right click here

function ChecksAndRadios() {  const [showToolbar, setShowToolbar] = React.useState(true);  const [showSidebar, setShowSidebar] = React.useState(false);  const [sortBy, setSortBy] = React.useState("name");  return (    <ContextMenu>      <ContextMenuTrigger className="flex h-32 w-full items-center justify-center rounded-md border border-dashed text-xs text-fg-muted select-none">        Right click here      </ContextMenuTrigger>      <ContextMenuContent className="w-56">        <ContextMenuLabel>View</ContextMenuLabel>        <ContextMenuCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>          Show toolbar        </ContextMenuCheckboxItem>        <ContextMenuCheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>          Show sidebar        </ContextMenuCheckboxItem>        <ContextMenuSeparator />        <ContextMenuLabel>Sort by</ContextMenuLabel>        <ContextMenuRadioGroup value={sortBy} onValueChange={setSortBy}>          <ContextMenuRadioItem value="name">Name</ContextMenuRadioItem>          <ContextMenuRadioItem value="date">Date modified</ContextMenuRadioItem>          <ContextMenuRadioItem value="size">Size</ContextMenuRadioItem>        </ContextMenuRadioGroup>      </ContextMenuContent>    </ContextMenu>  );}

Props

This component was added from upstream shadcn with minimal integration. Refer to the Radix Context Menu documentation for the full prop surface; additional Reva-specific notes will be added in a follow-up pass.

Context Menu

On this page