Context Menu

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Right-click anywhere inside this panel

Prop reference

Auto-generated from the component source

ContextMenu

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof ContextMenuPrimitive.Root>

ContextMenuCheckboxItem

className
children
checked

React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>

ContextMenuContent

className

React.ComponentProps<typeof ContextMenuPrimitive.Content>

ContextMenuGroup

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof ContextMenuPrimitive.Group>

ContextMenuItem

className
inset
variant = "default"

React.ComponentProps<typeof ContextMenuPrimitive.Item> & { inset?: boolean; variant?: "default" | "destructive"; }

ContextMenuLabel

className
inset

React.ComponentProps<typeof ContextMenuPrimitive.Label> & { inset?: boolean; }

ContextMenuPortal

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof ContextMenuPrimitive.Portal>

ContextMenuRadioGroup

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>

ContextMenuRadioItem

className
children

React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>

ContextMenuSeparator

className

React.ComponentProps<typeof ContextMenuPrimitive.Separator>

ContextMenuShortcut

className

React.ComponentProps<"span">

ContextMenuSub

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof ContextMenuPrimitive.Sub>

ContextMenuSubContent

className

React.ComponentProps<typeof ContextMenuPrimitive.SubContent>

ContextMenuSubTrigger

className
inset
children

React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean; }

ContextMenuTrigger

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof ContextMenuPrimitive.Trigger>

Code

// owner: Sona
"use client";

import { useState } from "react";
import { Trash2Icon } from "lucide-react";

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function ContextMenuExample() {
  const [theme, setTheme] = useState("system");
  const [notifications, setNotifications] = useState(true);

  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <div className="flex h-32 w-full items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
          Right-click anywhere inside this panel
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuLabel>Workspace</ContextMenuLabel>
        <ContextMenuItem>Rename</ContextMenuItem>
        <ContextMenuItem>Duplicate</ContextMenuItem>
        <ContextMenuItem variant="destructive">
          <Trash2Icon className="size-4" /> Delete
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem
          checked={notifications}
          onCheckedChange={(value) => setNotifications(Boolean(value))}
        >
          Notifications
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuLabel>Theme</ContextMenuLabel>
        <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
          <ContextMenuRadioItem value="system">System</ContextMenuRadioItem>
          <ContextMenuRadioItem value="light">Light</ContextMenuRadioItem>
          <ContextMenuRadioItem value="dark">Dark</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

Context Menu

Component preview

On this page

Command Palette