Right-click a file, or long-press on touch.
{trashed > 0 && (
)}
);
}
```
### Canvas
One menu for a whole area, with a radio submenu and checkbox items that drive the canvas.
```tsx
"use client";
import * as React from "react";
import { ZoomIn } from "@/components/ui/icons";
import {
ContextMenu,
ContextMenuCheckboxItem,
ContextMenuContent,
ContextMenuItem,
ContextMenuLabel,
ContextMenuRadioGroup,
ContextMenuRadioItem,
ContextMenuSeparator,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
const zoomLevels = [
{ value: "50", shortcut: "⇧0" },
{ value: "100", shortcut: "⇧1" },
{ value: "200", shortcut: "⇧2" },
];
export default function ContextMenuCanvas() {
const [zoom, setZoom] = React.useState("100");
const [grid, setGrid] = React.useState(true);
const [rulers, setRulers] = React.useState(false);
return (
{grid && (
)}
{rulers && (
<>
)}
{zoom}%
Right-click anywhere on the canvas
Paste
Select all
}>Zoom
Zoom to
{zoomLevels.map((level) => (
{level.value}%
))}
Show grid
Show rulers
);
}
```
### Messages
Long-press a message on touch, or focus one and press Shift+F10.
```tsx
"use client";
import * as React from "react";
import { Copy, MailOpen, Pin, Reply, Trash2 } from "@/components/ui/icons";
import { Avatar } from "@/components/ui/avatar";
import {
ContextMenu,
ContextMenuCheckboxItem,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
const thread = [
{ id: "m1", author: "Mara Okafor", time: "09:12", text: "Preview for the pricing page is up. The plan cards finally line up on mobile." },
{ id: "m2", author: "Jonas Weber", time: "09:15", text: "Looks great. Can we ship it behind the flag first and watch conversion for a day?" },
{ id: "m3", author: "Priya Raman", time: "09:21", text: "Flag is on for 10% of traffic. I'll post numbers after lunch." },
];
export default function ContextMenuMessages() {
const [messages, setMessages] = React.useState(thread);
const [pinned, setPinned] = React.useState("m3");
return (
);
}
```
## API reference
### ContextMenu
Holds the state and the pointer position. Renders no element of its own. Built on DropdownMenu with anchorPoint.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the menu opens or closes. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Without it the menu takes the trigger area's color, then --neon-accent, then cyan. |
### ContextMenuTrigger
The area that answers right-click. Renders a div and accepts its native attributes.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Uses the single child as the area instead of rendering a div. |
| `disabled` | `boolean` | `false` | Lets the browser's own context menu through. |
### ContextMenuContent
The same panel as DropdownMenuContent, opened at the pointer.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Which side of the pointer to open on. Flips near the viewport edge. |
| `align` | `"start" \| "center" \| "end"` | `"start"` | Alignment against the pointer. |
| `sideOffset` | `number` | `2` | Gap from the pointer in px, so the item under the cursor isn't hovered on open. |
| `loop` | `boolean` | `true` | Arrow keys wrap around. |
### Items
ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuLabel, ContextMenuGroup, ContextMenuSeparator, ContextMenuSub, ContextMenuSubTrigger and ContextMenuSubContent are the Dropdown Menu parts under new names, with the same props.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `ReactNode` | — | Leading icon on items and sub triggers. |
| `shortcut` | `ReactNode` | — | Right-aligned hint. |
| `variant` | `"default" \| "danger"` | `"default"` | danger turns the item red. |
| `onSelect` | `(event: Event) => void` | — | Called on select. The menu closes unless you call event.preventDefault(). |
## Accessibility
- Opens at the pointer on right-click, after a 500ms long-press on touch (moving more than 10px cancels it), and from the keyboard with Shift+F10 or the ContextMenu key at the area's top-left corner.
- The browser's own context menu is suppressed inside the trigger and the menu. Set disabled to give it back.
- For Shift+F10 to reach the area, it or something inside it must be focusable: give the area tabIndex={0} or use focusable children.
- The keyboard model is the Dropdown Menu's: arrows, Home and End, typeahead, Enter or Space to select, ArrowRight and ArrowLeft for submenus, Escape and Tab to close.
- Focus returns to whatever had it before the menu opened. The menu has no trigger to name it, so pass aria-label to ContextMenuContent.
## Source
`components/ui/context-menu.tsx`
```tsx
"use client";
import * as React from "react";
import {
DropdownMenu,
DropdownMenuAnchor,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
type DropdownMenuCheckboxItemProps,
type DropdownMenuContentProps,
type DropdownMenuItemProps,
type DropdownMenuLabelProps,
type DropdownMenuRadioGroupProps,
type DropdownMenuRadioItemProps,
type DropdownMenuSubContentProps,
type DropdownMenuSubTriggerProps,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";
type RenderProp = { asChild?: boolean; render?: React.ReactElement; nativeButton?: boolean; children?: React.ReactNode };
/**
* Base UI spells asChild as `render={}` plus `nativeButton`, and the shadcn CLI rewrites
* asChild into that form in base-* projects. Folds it back into asChild and children.
*/
function fromRenderProp
({ render, nativeButton, ...props }: P): Omit {
void nativeButton; // Only meaningful to Base UI.
if (!render) return props;
const children = props.children === undefined ? render : React.cloneElement(render, undefined, props.children);
return { ...props, asChild: true, children };
}
const LONG_PRESS = 500;
const MOVE_TOLERANCE = 10;
// The ContextMenu key, Shift+F10 and an Android long-press can each be followed by a native
// contextmenu event; ignore it for a moment after we've opened the menu ourselves.
const ECHO_WINDOW = 500;
interface ContextMenuContextValue {
open: boolean;
color?: NeonColor;
openAt: (x: number, y: number) => void;
/** Bumps on every open so a second right-click moves the menu instead of reviving the old one. */
generation: number;
}
const ContextMenuContext = React.createContext(null);
function useContextMenu(component: string) {
const context = React.useContext(ContextMenuContext);
if (!context) throw new Error(`<${component}> must be rendered inside .`);
return context;
}
export interface ContextMenuProps {
onOpenChange?: (open: boolean) => void;
/** Palette name or hex. When omitted the menu takes the trigger area's color, then `--neon-accent`. */
color?: NeonColor;
children?: React.ReactNode;
}
function ContextMenu({ onOpenChange, color, children }: ContextMenuProps) {
const [open, setOpen] = React.useState(false);
const [point, setPoint] = React.useState({ x: 0, y: 0 });
const [generation, setGeneration] = React.useState(0);
const handleOpenChange = React.useCallback(
(next: boolean) => {
setOpen(next);
onOpenChange?.(next);
},
[onOpenChange],
);
const openAt = React.useCallback(
(x: number, y: number) => {
setPoint({ x, y });
setGeneration((count) => count + 1);
setOpen(true);
if (!open) onOpenChange?.(true);
},
[open, onOpenChange],
);
const context = React.useMemo(() => ({ open, color, openAt, generation }), [open, color, openAt, generation]);
return (
{children}
);
}
ContextMenu.displayName = "ContextMenu";
export interface ContextMenuTriggerProps extends React.HTMLAttributes {
/** Merge the right-click behaviour onto the single child element instead of rendering a div. */
asChild?: boolean;
/** Base UI-style asChild: `render={}`. */
render?: React.ReactElement;
/** Accepted for Base UI compatibility; no effect. */
nativeButton?: boolean;
/** Lets the browser's own context menu through. */
disabled?: boolean;
}
const ContextMenuTrigger = React.forwardRef(
(raw, ref) => {
const {
asChild = false,
disabled = false,
className,
style,
onContextMenu,
onPointerDown,
onPointerMove,
onPointerUp,
onPointerCancel,
onKeyDown,
...props
} = fromRenderProp(raw);
const { open, color, openAt } = useContextMenu("ContextMenuTrigger");
const press = React.useRef<{ x: number; y: number; timer: number } | null>(null);
const openedAt = React.useRef(-Infinity);
const cancelPress = React.useCallback(() => {
if (!press.current) return;
window.clearTimeout(press.current.timer);
press.current = null;
}, []);
React.useEffect(() => cancelPress, [cancelPress]);
return (
{
onContextMenu?.(event);
cancelPress();
if (event.defaultPrevented || disabled) return;
event.preventDefault();
if (performance.now() - openedAt.current < ECHO_WINDOW) return;
openAt(event.clientX, event.clientY);
}}
onPointerDown={(event) => {
onPointerDown?.(event);
cancelPress();
if (event.defaultPrevented || disabled || event.pointerType === "mouse") return;
const { clientX: x, clientY: y } = event;
press.current = {
x,
y,
timer: window.setTimeout(() => {
press.current = null;
openedAt.current = performance.now();
openAt(x, y);
}, LONG_PRESS),
};
}}
onPointerMove={(event) => {
onPointerMove?.(event);
const start = press.current;
if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > MOVE_TOLERANCE) cancelPress();
}}
onPointerUp={(event) => {
onPointerUp?.(event);
cancelPress();
}}
onPointerCancel={(event) => {
onPointerCancel?.(event);
cancelPress();
}}
onKeyDown={(event) => {
onKeyDown?.(event);
if (event.defaultPrevented || disabled) return;
if (event.key === "ContextMenu" || (event.key === "F10" && event.shiftKey)) {
event.preventDefault();
openedAt.current = performance.now();
const rect = event.currentTarget.getBoundingClientRect();
openAt(rect.left, rect.top);
}
}}
/>
);
},
);
ContextMenuTrigger.displayName = "ContextMenuTrigger";
export type ContextMenuContentProps = DropdownMenuContentProps;
const ContextMenuContent = React.forwardRef(
({ side = "right", align = "start", sideOffset = 2, onContextMenu, ...props }, ref) => {
const { generation } = useContextMenu("ContextMenuContent");
return (
{
onContextMenu?.(event);
event.preventDefault();
}}
{...props}
/>
);
},
);
ContextMenuContent.displayName = "ContextMenuContent";
export type ContextMenuItemProps = DropdownMenuItemProps;
export type ContextMenuCheckboxItemProps = DropdownMenuCheckboxItemProps;
export type ContextMenuRadioGroupProps = DropdownMenuRadioGroupProps;
export type ContextMenuRadioItemProps = DropdownMenuRadioItemProps;
export type ContextMenuLabelProps = DropdownMenuLabelProps;
export type ContextMenuSubTriggerProps = DropdownMenuSubTriggerProps;
export type ContextMenuSubContentProps = DropdownMenuSubContentProps;
export {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
DropdownMenuItem as ContextMenuItem,
DropdownMenuCheckboxItem as ContextMenuCheckboxItem,
DropdownMenuRadioGroup as ContextMenuRadioGroup,
DropdownMenuRadioItem as ContextMenuRadioItem,
DropdownMenuLabel as ContextMenuLabel,
DropdownMenuGroup as ContextMenuGroup,
DropdownMenuSeparator as ContextMenuSeparator,
DropdownMenuSub as ContextMenuSub,
DropdownMenuSubTrigger as ContextMenuSubTrigger,
DropdownMenuSubContent as ContextMenuSubContent,
};
```