npm install @radix-ui/react-context-menu

import { ContextMenu } from "radix-ui";

export default () => (
	<ContextMenu.Root>
		<ContextMenu.Trigger />

		<ContextMenu.Portal>
			<ContextMenu.Content>
				<ContextMenu.Label />
				<ContextMenu.Item />

				<ContextMenu.Group>
					<ContextMenu.Item />
				</ContextMenu.Group>

				<ContextMenu.CheckboxItem>
					<ContextMenu.ItemIndicator />
				</ContextMenu.CheckboxItem>

				<ContextMenu.RadioGroup>
					<ContextMenu.RadioItem>
						<ContextMenu.ItemIndicator />
					</ContextMenu.RadioItem>
				</ContextMenu.RadioGroup>

				<ContextMenu.Sub>
					<ContextMenu.SubTrigger />
					<ContextMenu.Portal>
						<ContextMenu.SubContent />
					</ContextMenu.Portal>
				</ContextMenu.Sub>

				<ContextMenu.Separator />
			</ContextMenu.Content>
		</ContextMenu.Portal>
	</ContextMenu.Root>
);

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "disabled",
		required: false,
		type: "boolean",
		default: "false",
		description: (
			<span>
				When <Code>true</Code>, the context menu won't open when
				right-clicking. Note that this will also restore the native context
				menu.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "loop",
		required: false,
		type: "boolean",
		default: "false",
		description: (
			<span>
				When <Code>true</Code>, keyboard navigation will loop from last item
				to first, and vice versa.
			</span>
		),
	},
	{
		name: "onCloseAutoFocus",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves back after closing. It can be
				prevented by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onEscapeKeyDown",
		type: "(event: KeyboardEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the escape key is down. It can be prevented
				by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onPointerDownOutside",
		type: "(event: PointerDownOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when a pointer event occurs outside the bounds of
				the component. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onFocusOutside",
		type: "(event: FocusOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves outside the bounds of the
				component. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onInteractOutside",
		type: "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when an interaction (pointer or focus event)
				happens outside the bounds of the component. It can be prevented by
				calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description: (
			<span>
				Used to force mounting when more control is needed. Useful when
				controlling animation with React animation libraries. It inherits from{" "}
				<Code>ContextMenu.Portal</Code>.
			</span>
		),
	},
	{
		name: "alignOffset",
		type: "number",
		default: "0",
		description: (
			<span>The vertical distance in pixels from the anchor.</span>
		),
	},
	{
		name: "avoidCollisions",
		type: "boolean",
		default: "true",
		description: (
			<span>
				When <Code>true</Code>, overrides the <Code>side</Code> and
				<Code>align</Code> preferences to prevent collisions with boundary
				edges.
			</span>
		),
	},
	{
		name: "collisionBoundary",
		type: "Element | null | Array<Element | null>",
		typeSimple: "Boundary",
		default: "[]",
		description: (
			<span>
				The element used as the collision boundary. By default this is the
				viewport, though you can provide additional element(s) to be included
				in this check.
			</span>
		),
	},
	{
		name: "collisionPadding",
		type: "number | Partial<Record<Side, number>>",
		typeSimple: "number | Padding",
		default: "0",
		description: (
			<span>
				The distance in pixels from the boundary edges where collision
				detection should occur. Accepts a number (same for all sides), or a
				partial padding object, for example:{" "}
				<Code>{`{ top: 20, left: 20 }`}</Code>.
			</span>
		),
	},
	{
		name: "sticky",
		type: '"partial" | "always"',
		typeSimple: "enum",
		default: '"partial"',
		description: (
			<span>
				The sticky behavior on the align axis. <Code>"partial"</Code> will
				keep the content in the boundary as long as the trigger is at least
				partially in the boundary whilst <Code>"always"</Code> will keep the
				content in the boundary regardless.
			</span>
		),
	},
	{
		name: "hideWhenDetached",
		type: "boolean",
		default: "false",
		description: (
			<span>
				Whether to hide the content when the trigger becomes fully occluded.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "width",
		type: "number",
		default: 10,
		description: <span>The width of the arrow in pixels.</span>,
	},
	{
		name: "height",
		type: "number",
		default: 5,
		description: <span>The height of the arrow in pixels.</span>,
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				item.
			</span>
		),
	},
	{
		name: "onSelect",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the user selects an item (via mouse or
				keyboard). Calling <Code>event.preventDefault</Code> in this handler
				will prevent the context menu from closing when selecting that item.
			</span>
		),
	},
	{
		name: "textValue",
		type: "string",
		description: (
			<span>
				Optional text used for typeahead purposes. By default the typeahead
				behavior will use the <Code>.textContent</Code> of the item. Use this
				when the content is complex, or you have non-textual content inside.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "checked",
		type: `boolean | 'indeterminate'`,
		description: (
			<span>
				The controlled checked state of the item. Must be used in conjunction
				with <Code>onCheckedChange</Code>.
			</span>
		),
	},
	{
		name: "onCheckedChange",
		type: `(checked: boolean) => void`,
		typeSimple: "function",
		description: (
			<span>Event handler called when the checked state changes.</span>
		),
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				item.
			</span>
		),
	},
	{
		name: "onSelect",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the user selects an item (via mouse or
				keyboard). Calling <Code>event.preventDefault</Code> in this handler
				will prevent the context menu from closing when selecting that item.
			</span>
		),
	},
	{
		name: "textValue",
		type: "string",
		description: (
			<span>
				Optional text used for typeahead purposes. By default the typeahead
				behavior will use the <Code>.textContent</Code> of the item. Use this
				when the content is complex, or you have non-textual content inside.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "value",
		type: "string",
		description: "The value of the selected item in the group.",
	},
	{
		name: "onValueChange",
		type: "(value: string) => void",
		typeSimple: "function",
		description: "Event handler called when the value changes.",
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "value",
		type: "string",
		required: true,
		description: "The unique value of the item.",
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				item.
			</span>
		),
	},
	{
		name: "onSelect",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the user selects an item (via mouse or
				keyboard). Calling <Code>event.preventDefault</Code> in this handler
				will prevent the context menu from closing when selecting that item.
			</span>
		),
	},
	{
		name: "textValue",
		type: "string",
		description: (
			<span>
				Optional text used for typeahead purposes. By default the typeahead
				behavior will use the <Code>.textContent</Code> of the item. Use this
				when the content is complex, or you have non-textual content inside.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description: (
			<span>
				Used to force mounting when more control is needed. Useful when
				controlling animation with React animation libraries.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				item.
			</span>
		),
	},
	{
		name: "textValue",
		type: "string",
		description: (
			<span>
				Optional text used for typeahead purposes. By default the typeahead
				behavior will use the <Code>.textContent</Code> of the item. Use this
				when the content is complex, or you have non-textual content inside.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "loop",
		required: false,
		type: "boolean",
		default: "false",
		description: (
			<span>
				When <Code>true</Code>, keyboard navigation will loop from last item
				to first, and vice versa.
			</span>
		),
	},
	{
		name: "onEscapeKeyDown",
		type: "(event: KeyboardEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the escape key is down. It can be prevented
				by calling <Code>event.preventDefault</Code>
			</span>
		),
	},
	{
		name: "onPointerDownOutside",
		type: "(event: PointerDownOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when a pointer event occurs outside the bounds of
				the component. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onFocusOutside",
		type: "(event: FocusOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves outside the bounds of the
				component. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onInteractOutside",
		type: "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when an interaction (pointer or focus event)
				happens outside the bounds of the component. It can be prevented by
				calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description: (
			<span>
				Used to force mounting when more control is needed. Useful when
				controlling animation with React animation libraries. It inherits from{" "}
				<Code>ContextMenu.Portal</Code>.
			</span>
		),
	},
	{
		name: "sideOffset",
		type: "number",
		default: "0",
		description: <span>The distance in pixels from the trigger.</span>,
	},
	{
		name: "alignOffset",
		type: "number",
		default: "0",
		description: (
			<span>
				An offset in pixels from the <Code>"start"</Code> or{" "}
				<Code>"end"</Code> alignment options.
			</span>
		),
	},
	{
		name: "avoidCollisions",
		type: "boolean",
		default: "true",
		description: (
			<span>
				When <Code>true</Code>, overrides the <Code>side</Code> and
				<Code>align</Code> preferences to prevent collisions with boundary
				edges.
			</span>
		),
	},
	{
		name: "collisionBoundary",
		type: "Element | null | Array<Element | null>",
		typeSimple: "Boundary",
		default: "[]",
		description: (
			<span>
				The element used as the collision boundary. By default this is the
				viewport, though you can provide additional element(s) to be included
				in this check.
			</span>
		),
	},
	{
		name: "collisionPadding",
		type: "number | Partial<Record<Side, number>>",
		typeSimple: "number | Padding",
		default: "0",
		description: (
			<span>
				The distance in pixels from the boundary edges where collision
				detection should occur. Accepts a number (same for all sides), or a
				partial padding object, for example:{" "}
				<Code>{`{ top: 20, left: 20 }`}</Code>.
			</span>
		),
	},
	{
		name: "arrowPadding",
		type: "number",
		default: "0",
		description: (
			<span>
				The padding between the arrow and the edges of the content. If your
				content has <Code>border-radius</Code>, this will prevent it from
				overflowing the corners.
			</span>
		),
	},
	{
		name: "sticky",
		type: '"partial" | "always"',
		typeSimple: "enum",
		default: '"partial"',
		description: (
			<span>
				The sticky behavior on the align axis. <Code>"partial"</Code> will
				keep the content in the boundary as long as the trigger is at least
				partially in the boundary whilst <Code>"always"</Code> will keep the
				content in the boundary regardless.
			</span>
		),
	},
	{
		name: "hideWhenDetached",
		type: "boolean",
		default: "false",
		description: (
			<span>
				Whether to hide the content when the trigger becomes fully occluded.
			</span>
		),
	},
]}

<ContextMenu.Root>
	<ContextMenu.Trigger>…</ContextMenu.Trigger>
	<ContextMenu.Portal>
		<ContextMenu.Content>
			<ContextMenu.Item>…</ContextMenu.Item>
			<ContextMenu.Item>…</ContextMenu.Item>
			<ContextMenu.Separator />
			<ContextMenu.Sub>
				<ContextMenu.SubTrigger>Sub menu →</ContextMenu.SubTrigger>
				<ContextMenu.Portal>
					<ContextMenu.SubContent>
						<ContextMenu.Item>Sub menu item</ContextMenu.Item>
						<ContextMenu.Item>Sub menu item</ContextMenu.Item>
						<ContextMenu.Arrow />
					</ContextMenu.SubContent>
				</ContextMenu.Portal>
			</ContextMenu.Sub>
			<ContextMenu.Separator />
			<ContextMenu.Item>…</ContextMenu.Item>
		</ContextMenu.Content>
	</ContextMenu.Portal>
</ContextMenu.Root>

// index.jsx
import { ContextMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<ContextMenu.Root>
		<ContextMenu.Trigger>…</ContextMenu.Trigger>
		<ContextMenu.Portal>
			<ContextMenu.Content>
				<ContextMenu.Item __className__="ContextMenuItem" __disabled__>
					…
				</ContextMenu.Item>
				<ContextMenu.Item className="ContextMenuItem">…</ContextMenu.Item>
			</ContextMenu.Content>
		</ContextMenu.Portal>
	</ContextMenu.Root>
);

/* styles.css */
.ContextMenuItem[__data-disabled__] {
	color: gainsboro;
}

<ContextMenu.Root>
	<ContextMenu.Trigger>…</ContextMenu.Trigger>
	<ContextMenu.Portal>
		<ContextMenu.Content>
			<ContextMenu.Item>…</ContextMenu.Item>
			<ContextMenu.Separator />
			<ContextMenu.Item>…</ContextMenu.Item>
			<ContextMenu.Separator />
			<ContextMenu.Item>…</ContextMenu.Item>
		</ContextMenu.Content>
	</ContextMenu.Portal>
</ContextMenu.Root>

<ContextMenu.Root>
	<ContextMenu.Trigger>…</ContextMenu.Trigger>
	<ContextMenu.Portal>
		<ContextMenu.Content>
			<ContextMenu.Label>Label</ContextMenu.Label>
			<ContextMenu.Item>…</ContextMenu.Item>
			<ContextMenu.Item>…</ContextMenu.Item>
			<ContextMenu.Item>…</ContextMenu.Item>
		</ContextMenu.Content>
	</ContextMenu.Portal>
</ContextMenu.Root>

import * as React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import { ContextMenu } from "radix-ui";

export default () => {
	const [checked, setChecked] = React.useState(true);

	return (
		<ContextMenu.Root>
			<ContextMenu.Trigger>…</ContextMenu.Trigger>
			<ContextMenu.Portal>
				<ContextMenu.Content>
					<ContextMenu.Item>…</ContextMenu.Item>
					<ContextMenu.Item>…</ContextMenu.Item>
					<ContextMenu.Separator />
					<ContextMenu.CheckboxItem
						checked={checked}
						onCheckedChange={setChecked}
					>
						<ContextMenu.ItemIndicator>
							<CheckIcon />
						</ContextMenu.ItemIndicator>
						Checkbox item
					</ContextMenu.CheckboxItem>
				</ContextMenu.Content>
			</ContextMenu.Portal>
		</ContextMenu.Root>
	);
};

import * as React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import { ContextMenu } from "radix-ui";

export default () => {
	const [color, setColor] = React.useState("blue");

	return (
		<ContextMenu.Root>
			<ContextMenu.Trigger>…</ContextMenu.Trigger>
			<ContextMenu.Portal>
				<ContextMenu.Content>
					<ContextMenu.RadioGroup value={color} onValueChange={setColor}>
						<ContextMenu.RadioItem value="red">
							<ContextMenu.ItemIndicator>
								<CheckIcon />
							</ContextMenu.ItemIndicator>
							Red
						</ContextMenu.RadioItem>
						<ContextMenu.RadioItem value="blue">
							<ContextMenu.ItemIndicator>
								<CheckIcon />
							</ContextMenu.ItemIndicator>
							Blue
						</ContextMenu.RadioItem>
						<ContextMenu.RadioItem value="green">
							<ContextMenu.ItemIndicator>
								<CheckIcon />
							</ContextMenu.ItemIndicator>
							Green
						</ContextMenu.RadioItem>
					</ContextMenu.RadioGroup>
				</ContextMenu.Content>
			</ContextMenu.Portal>
		</ContextMenu.Root>
	);
};

import { ContextMenu } from "radix-ui";

export default () => (
	<ContextMenu.Root>
		<ContextMenu.Trigger>…</ContextMenu.Trigger>
		<ContextMenu.Portal>
			<ContextMenu.Content>
				<ContextMenu.Item>
					
					Adolfo Hess
				</ContextMenu.Item>
				<ContextMenu.Item>
					
					Miyah Myles
				</ContextMenu.Item>
			</ContextMenu.Content>
		</ContextMenu.Portal>
	</ContextMenu.Root>
);

// index.jsx
import { ContextMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<ContextMenu.Root>
		<ContextMenu.Trigger>…</ContextMenu.Trigger>
		<ContextMenu.Portal>
			<ContextMenu.Content __className__="ContextMenuContent">
				…
			</ContextMenu.Content>
		</ContextMenu.Portal>
	</ContextMenu.Root>
);

/* styles.css */
.ContextMenuContent {
	width: var(__--radix-context-menu-trigger-width__);
	max-height: var(__--radix-context-menu-content-available-height__);
}

// index.jsx
import { ContextMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<ContextMenu.Root>
		<ContextMenu.Trigger>…</ContextMenu.Trigger>
		<ContextMenu.Portal>
			<ContextMenu.Content __className__="ContextMenuContent">
				…
			</ContextMenu.Content>
		</ContextMenu.Portal>
	</ContextMenu.Root>
);

/* styles.css */
.ContextMenuContent {
	transform-origin: var(__--radix-context-menu-content-transform-origin__);
	animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

// index.jsx
import { ContextMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<ContextMenu.Root>
		<ContextMenu.Trigger>…</ContextMenu.Trigger>
		<ContextMenu.Portal>
			<ContextMenu.Content __className__="ContextMenuContent">
				…
			</ContextMenu.Content>
		</ContextMenu.Portal>
	</ContextMenu.Root>
);

/* styles.css */
.ContextMenuContent {
	animation-duration: 0.6s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.ContextMenuContent[__data-side="top"__] {
	animation-name: slideUp;
}
.ContextMenuContent[__data-side="bottom"__] {
	animation-name: slideDown;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}