Source: https://www.radix-ui.com/primitives/docs/components/context-menu

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Case studies Blog

Search

/

Overview

Introduction Getting started Accessibility Releases

Guides

Styling Animation Composition Server-side rendering

Components

Accordion Alert Dialog Aspect Ratio Avatar Checkbox Collapsible Context Menu Dialog Dropdown Menu Form

Preview Hover Card Label Menubar Navigation Menu One-Time Password Field

Preview Password Toggle Field

Preview Popover Progress Radio Group Scroll Area Select Separator Slider Switch Tabs Toast Toggle Toggle Group Toolbar Tooltip

Utilities

Accessible Icon Direction Provider Portal Slot Visually Hidden

Components

Context Menu

Displays a menu located at the pointer, triggered by a right click or a long press.

Right-click here.

index.jsxindex.jsxstyles.cssstyles.css

CSS

import * as React from "react";
import { ContextMenu } from "radix-ui";
import {
	DotFilledIcon,
	CheckIcon,
	ChevronRightIcon,
} from "@radix-ui/react-icons";
import "./styles.css";

const ContextMenuDemo = () => {
	const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
	const [urlsChecked, setUrlsChecked] = React.useState(false);
	const [person, setPerson] = React.useState("pedro");

	return (
		<ContextMenu.Root>
			<ContextMenu.Trigger className="ContextMenuTrigger">
				Right-click here.
			</ContextMenu.Trigger>
			<ContextMenu.Portal>
				<ContextMenu.Content
					className="ContextMenuContent"
					sideOffset={5}
					align="end"
				>
					<ContextMenu.Item className="ContextMenuItem">
						Back <div className="RightSlot">⌘+[</div>\
					</ContextMenu.Item>\
					<ContextMenu.Item className="ContextMenuItem" disabled>\
						Forward <div className="RightSlot">⌘+]</div>
					</ContextMenu.Item>
					<ContextMenu.Item className="ContextMenuItem">
						Reload <div className="RightSlot">⌘+R</div>
					</ContextMenu.Item>
					<ContextMenu.Sub>
						<ContextMenu.SubTrigger className="ContextMenuSubTrigger">
							More Tools
							<div className="RightSlot">
								<ChevronRightIcon />
							</div>
						</ContextMenu.SubTrigger>
						<ContextMenu.Portal>
							<ContextMenu.SubContent
								className="ContextMenuSubContent"
								sideOffset={2}
								alignOffset={-5}
							>
								<ContextMenu.Item className="ContextMenuItem">
									Save Page As… <div className="RightSlot">⌘+S</div>
								</ContextMenu.Item>
								<ContextMenu.Item className="ContextMenuItem">
									Create Shortcut…
								</ContextMenu.Item>
								<ContextMenu.Item className="ContextMenuItem">
									Name Window…
								</ContextMenu.Item>
								<ContextMenu.Separator className="ContextMenuSeparator" />
								<ContextMenu.Item className="ContextMenuItem">
									Developer Tools
								</ContextMenu.Item>
							</ContextMenu.SubContent>
						</ContextMenu.Portal>
					</ContextMenu.Sub>

					<ContextMenu.Separator className="ContextMenuSeparator" />

					<ContextMenu.CheckboxItem
						className="ContextMenuCheckboxItem"
						checked={bookmarksChecked}
						onCheckedChange={setBookmarksChecked}
					>
						<ContextMenu.ItemIndicator className="ContextMenuItemIndicator">
							<CheckIcon />
						</ContextMenu.ItemIndicator>
						Show Bookmarks <div className="RightSlot">⌘+B</div>
					</ContextMenu.CheckboxItem>
					<ContextMenu.CheckboxItem
						className="ContextMenuCheckboxItem"
						checked={urlsChecked}
						onCheckedChange={setUrlsChecked}
					>
						<ContextMenu.ItemIndicator className="ContextMenuItemIndicator">
							<CheckIcon />
						</ContextMenu.ItemIndicator>
						Show Full URLs
					</ContextMenu.CheckboxItem>

					<ContextMenu.Separator className="ContextMenuSeparator" />

					<ContextMenu.Label className="ContextMenuLabel">
						People
					</ContextMenu.Label>
					<ContextMenu.RadioGroup value={person} onValueChange={setPerson}>
						<ContextMenu.RadioItem
							className="ContextMenuRadioItem"
							value="pedro"
						>
							<ContextMenu.ItemIndicator className="ContextMenuItemIndicator">
								<DotFilledIcon />
							</ContextMenu.ItemIndicator>
							Pedro Duarte
						</ContextMenu.RadioItem>
						<ContextMenu.RadioItem
							className="ContextMenuRadioItem"
							value="colm"
						>
							<ContextMenu.ItemIndicator className="ContextMenuItemIndicator">
								<DotFilledIcon />
							</ContextMenu.ItemIndicator>
							Colm Tuite
						</ContextMenu.RadioItem>
					</ContextMenu.RadioGroup>
				</ContextMenu.Content>
			</ContextMenu.Portal>
		</ContextMenu.Root>
	);
};

export default ContextMenuDemo;

Features

Supports submenus with configurable reading direction.

Supports items, labels, groups of items.

Supports checkable items (single or multiple) with optional indeterminate state.

Supports modal and non-modal modes.

Customize side, alignment, offsets, collision handling.

Focus is fully managed.

Full keyboard navigation.

Typeahead support.

Dismissing and layering behavior is highly customizable.

Triggers with a long press on touch devices

Installation

---

Install the component from your command line.

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

Anatomy

---

Import all parts and piece them together.

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>
);

API Reference

---

Adheres to the Menu WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.

Root

Contains all the parts of a context menu.

| Prop | Type | Default | | --- | --- | --- | | dir<br><br>Prop description | enum<br><br>See full type | No default value | | onOpenChange<br><br>Prop description | function<br><br>See full type | No default value | | modal<br><br>Prop description | boolean | true |

Trigger

The area that opens the context menu. Wrap it around the target you want the context menu to open from when right-clicking (or using the relevant keyboard shortcuts).

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | disabled<br><br>Prop description | boolean | false |

| Data attribute | Values | | --- | --- | | [data-state] | "open" \| "closed" |

Portal

When used, portals the content part into the body.

| Prop | Type | Default | | --- | --- | --- | | forceMount<br><br>Prop description | boolean | No default value | | container<br><br>Prop description | HTMLElement | document.body |

Content

The component that pops out in an open context menu.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | loop<br><br>Prop description | boolean | false | | onCloseAutoFocus<br><br>Prop description | function<br><br>See full type | No default value | | onEscapeKeyDown<br><br>Prop description | function<br><br>See full type | No default value | | onPointerDownOutside<br><br>Prop description | function<br><br>See full type | No default value | | onFocusOutside<br><br>Prop description | function<br><br>See full type | No default value | | onInteractOutside<br><br>Prop description | function<br><br>See full type | No default value | | forceMount<br><br>Prop description | boolean | No default value | | alignOffset<br><br>Prop description | number | 0 | | avoidCollisions<br><br>Prop description | boolean | true | | collisionBoundary<br><br>Prop description | Boundary<br><br>See full type | [] | | collisionPadding<br><br>Prop description | number \| Padding<br><br>See full type | 0 | | sticky<br><br>Prop description | enum<br><br>See full type | "partial" | | hideWhenDetached<br><br>Prop description | boolean | false |

| Data attribute | Values | | --- | --- | | [data-state] | "open" \| "closed" | | [data-side] | "left" \| "right" \| "bottom" \| "top" | | [data-align] | "start" \| "end" \| "center" |

| CSS Variable | Description | | --- | --- | | --radix-context-menu-content-transform-origin | The transform-origin computed from the content and arrow positions/offsets | | --radix-context-menu-content-available-width | The remaining width between the trigger and the boundary edge | | --radix-context-menu-content-available-height | The remaining height between the trigger and the boundary edge | | --radix-context-menu-trigger-width | The width of the trigger | | --radix-context-menu-trigger-height | The height of the trigger |

Arrow

An optional arrow element to render alongside a submenu. This can be used to help visually link the trigger item with the ContextMenu.Content. Must be rendered inside ContextMenu.Content.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | width<br><br>Prop description | number | 10 | | height<br><br>Prop description | number | 5 |

Item

The component that contains the context menu items.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | disabled<br><br>Prop description | boolean | No default value | | onSelect<br><br>Prop description | function<br><br>See full type | No default value | | textValue<br><br>Prop description | string | No default value |

| Data attribute | Values | | --- | --- | | [data-highlighted] | Present when highlighted | | [data-disabled] | Present when disabled |

Group

Used to group multiple ContextMenu.Items.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false |

Label

Used to render a label. It won't be focusable using arrow keys.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false |

CheckboxItem

An item that can be controlled and rendered like a checkbox.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | checked<br><br>Prop description | boolean \| 'indeterminate' | No default value | | onCheckedChange<br><br>Prop description | function<br><br>See full type | No default value | | disabled<br><br>Prop description | boolean | No default value | | onSelect<br><br>Prop description | function<br><br>See full type | No default value | | textValue<br><br>Prop description | string | No default value |

| Data attribute | Values | | --- | --- | | [data-state] | "checked" \| "unchecked" \| "indeterminate" | | [data-highlighted] | Present when highlighted | | [data-disabled] | Present when disabled |

RadioGroup

Used to group multiple ContextMenu.RadioItems.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | value<br><br>Prop description | string | No default value | | onValueChange<br><br>Prop description | function<br><br>See full type | No default value |

RadioItem

An item that can be controlled and rendered like a radio.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | value*<br><br>Prop description | string | No default value | | disabled<br><br>Prop description | boolean | No default value | | onSelect<br><br>Prop description | function<br><br>See full type | No default value | | textValue<br><br>Prop description | string | No default value |

| Data attribute | Values | | --- | --- | | [data-state] | "checked" \| "unchecked" \| "indeterminate" | | [data-highlighted] | Present when highlighted | | [data-disabled] | Present when disabled |

ItemIndicator

Renders when the parent ContextMenu.CheckboxItem or ContextMenu.RadioItem is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | forceMount<br><br>Prop description | boolean | No default value |

| Data attribute | Values | | --- | --- | | [data-state] | "checked" \| "unchecked" \| "indeterminate" |

Separator

Used to visually separate items in the context menu.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false |

Sub

Contains all the parts of a submenu.

| Prop | Type | Default | | --- | --- | --- | | defaultOpen<br><br>Prop description | boolean | No default value | | open<br><br>Prop description | boolean | No default value | | onOpenChange<br><br>Prop description | function<br><br>See full type | No default value |

SubTrigger

An item that opens a submenu. Must be rendered inside ContextMenu.Sub.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | disabled<br><br>Prop description | boolean | No default value | | textValue<br><br>Prop description | string | No default value |

| Data attribute | Values | | --- | --- | | [data-state] | "open" \| "closed" | | [data-highlighted] | Present when highlighted | | [data-disabled] | Present when disabled |

SubContent

The component that pops out when a submenu is open. Must be rendered inside ContextMenu.Sub.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | loop<br><br>Prop description | boolean | false | | onEscapeKeyDown<br><br>Prop description | function<br><br>See full type | No default value | | onPointerDownOutside<br><br>Prop description | function<br><br>See full type | No default value | | onFocusOutside<br><br>Prop description | function<br><br>See full type | No default value | | onInteractOutside<br><br>Prop description | function<br><br>See full type | No default value | | forceMount<br><br>Prop description | boolean | No default value | | sideOffset<br><br>Prop description | number | 0 | | alignOffset<br><br>Prop description | number | 0 | | avoidCollisions<br><br>Prop description | boolean | true | | collisionBoundary<br><br>Prop description | Boundary<br><br>See full type | [] | | collisionPadding<br><br>Prop description | number \| Padding<br><br>See full type | 0 | | arrowPadding<br><br>Prop description | number | 0 | | sticky<br><br>Prop description | enum<br><br>See full type | "partial" | | hideWhenDetached<br><br>Prop description | boolean | false |

| Data attribute | Values | | --- | --- | | [data-state] | "open" \| "closed" | | [data-side] | "left" \| "right" \| "bottom" \| "top" | | [data-align] | "start" \| "end" \| "center" |

| CSS Variable | Description | | --- | --- | | --radix-context-menu-content-transform-origin | The transform-origin computed from the content and arrow positions/offsets | | --radix-context-menu-content-available-width | The remaining width between the trigger and the boundary edge | | --radix-context-menu-content-available-height | The remaining height between the trigger and the boundary edge | | --radix-context-menu-trigger-width | The width of the trigger | | --radix-context-menu-trigger-height | The height of the trigger |

Examples

---

With submenus

You can create submenus by using ContextMenu.Sub in combination with its parts.

<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>

With disabled items

You can add special styles to disabled items via the data-disabled attribute.

// 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;
}

With separators

Use the Separator part to add a separator between items.

<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>

With labels

Use the Label part to help label a section.

<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>

With checkbox items

Use the CheckboxItem part to add an item that can be checked.

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>
	);
};

With radio items

Use the RadioGroup and RadioItem parts to add an item that can be checked amongst others.

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>
	);
};

With complex items

You can add extra decorative elements in the Item parts, such as images.

import { ContextMenu } from "radix-ui";

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

Constrain the content/sub-content size

You may want to constrain the width of the content (or sub-content) so that it matches the trigger (or sub-trigger) width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as --radix-context-menu-trigger-width and --radix-context-menu-content-available-height to support this. Use them to constrain the content dimensions.

// 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);
}

Origin-aware animations

We expose a CSS custom property --radix-context-menu-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

// 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);
	}
}

Collision-aware animations

We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

// 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);
	}
}

Accessibility

---

Uses roving tabindex to manage focus movement among menu items.

Keyboard Interactions

| Key | Description | | --- | --- | | Space | Activates the focused item. | | Enter | Activates the focused item. | | ArrowDown | Moves focus to the next item. | | ArrowUp | Moves focus to the previous item. | | ArrowRightArrowLeft | When focus is on ContextMenu.SubTrigger, opens or closes the submenu depending on reading direction. | | Esc | Closes the context menu |

PreviousCollapsible

NextDialog

Edit this page on GitHub.