Context Menu

A menu of actions opened by right-click or long-press.

Right-click (or long-press) here

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from '@/components/ui/context-menu'

export default function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full max-w-xs items-center justify-center rounded-lg border border-dashed border-border text-sm text-muted-foreground">
        Right-click (or long-press) here
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem disabled>
          Forward
          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Save as…</ContextMenuItem>
        <ContextMenuItem destructive>Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/context-menu.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Context Menu imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from '@/components/ui/context-menu'

<ContextMenu>
  <ContextMenuTrigger className="h-40 w-full">Right-click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      Reload
      <ContextMenuShortcut>⌘R</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem destructive>Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Examples

Options and submenu

Right-click here for options

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

export default function ContextMenuOptions() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full max-w-xs items-center justify-center rounded-lg border border-dashed border-border text-sm text-muted-foreground">
        Right-click here for options
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuCheckboxItem defaultChecked>Show grid</ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem>Show rulers</ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuLabel>Zoom</ContextMenuLabel>
        <ContextMenuRadioGroup defaultValue="100">
          <ContextMenuRadioItem value="50">50%</ContextMenuRadioItem>
          <ContextMenuRadioItem value="100">100%</ContextMenuRadioItem>
          <ContextMenuRadioItem value="200">200%</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>Export as</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>PNG</ContextMenuItem>
            <ContextMenuItem>SVG</ContextMenuItem>
            <ContextMenuItem>PDF</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
      </ContextMenuContent>
    </ContextMenu>
  )
}

API Reference

Name	Type	Default	Description
open / onOpenChange	boolean / (open: boolean) => void	—	Control the open state from outside (set on ContextMenu).
disabled	boolean	false	Ignores user interaction (set on ContextMenu).
ContextMenuTrigger	<div>	—	The area that opens the menu on right-click or long-press, at the pointer.
ContextMenuItem disabled	boolean	false	Ignores user interaction.
ContextMenuItem destructive	boolean	false	Styles the item in the destructive colour.
ContextMenuCheckboxItem checked / onCheckedChange	boolean / (checked: boolean) => void	—	Controlled ticked state of a checkbox item.
ContextMenuRadioGroup value / onValueChange	unknown / (value: unknown) => void	—	Controlled value of a group of ContextMenuRadioItem, each with its own value.
ContextMenuSub / SubTrigger / SubContent	—	—	Nests a submenu inside an item, opened on hover or by keyboard.