Radix homepage
Components

Context Menu

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

import React from 'react';
import { styled } from '@stitches/react';
import { violet, mauve } from '@radix-ui/colors';
import { DotFilledIcon, CheckIcon, ChevronRightIcon } from '@radix-ui/react-icons';
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
const contentStyles = {
minWidth: 220,
backgroundColor: 'white',
borderRadius: 6,
overflow: 'hidden',
padding: 5,
boxShadow:
'0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
};
const StyledContent = styled(ContextMenuPrimitive.Content, { ...contentStyles });
function Content(props) {
return (
<ContextMenuPrimitive.Portal>
<StyledContent {...props} />
</ContextMenuPrimitive.Portal>
);
}
const StyledSubContent = styled(ContextMenuPrimitive.SubContent, { ...contentStyles });
function SubContent(props) {
return (
<ContextMenuPrimitive.Portal>
<StyledSubContent {...props} />
</ContextMenuPrimitive.Portal>
);
}
const itemStyles = {
all: 'unset',
fontSize: 13,
lineHeight: 1,
color: violet.violet11,
borderRadius: 3,
display: 'flex',
alignItems: 'center',
height: 25,
padding: '0 5px',
position: 'relative',
paddingLeft: 25,
userSelect: 'none',
'&[data-disabled]': {
color: mauve.mauve8,
pointerEvents: 'none',
},
'&[data-highlighted]': {
backgroundColor: violet.violet9,
color: violet.violet1,
},
};
const StyledItem = styled(ContextMenuPrimitive.Item, { ...itemStyles });
const StyledCheckboxItem = styled(ContextMenuPrimitive.CheckboxItem, { ...itemStyles });
const StyledRadioItem = styled(ContextMenuPrimitive.RadioItem, { ...itemStyles });
const StyledSubTrigger = styled(ContextMenuPrimitive.SubTrigger, {
'&[data-state="open"]': {
backgroundColor: violet.violet4,
color: violet.violet11,
},
...itemStyles,
});
const StyledLabel = styled(ContextMenuPrimitive.Label, {
paddingLeft: 25,
fontSize: 12,
lineHeight: '25px',
color: mauve.mauve11,
});
const StyledSeparator = styled(ContextMenuPrimitive.Separator, {
height: 1,
backgroundColor: violet.violet6,
margin: 5,
});
const StyledItemIndicator = styled(ContextMenuPrimitive.ItemIndicator, {
position: 'absolute',
left: 0,
width: 25,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
});
// Exports
export const ContextMenu = ContextMenuPrimitive.Root;
export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
export const ContextMenuContent = Content;
export const ContextMenuItem = StyledItem;
export const ContextMenuCheckboxItem = StyledCheckboxItem;
export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
export const ContextMenuRadioItem = StyledRadioItem;
export const ContextMenuItemIndicator = StyledItemIndicator;
export const ContextMenuLabel = StyledLabel;
export const ContextMenuSeparator = StyledSeparator;
export const ContextMenuSub = ContextMenuPrimitive.Sub;
export const ContextMenuSubTrigger = StyledSubTrigger;
export const ContextMenuSubContent = SubContent;
// Your app...
const Box = styled('div', {});
const Instruction = styled('div', {
border: `2px white dashed`,
color: 'white',
borderRadius: 4,
fontSize: 15,
userSelect: 'none',
padding: '45px 0',
width: 300,
textAlign: 'center',
});
const RightSlot = styled('div', {
marginLeft: 'auto',
paddingLeft: 20,
color: mauve.mauve11,
'[data-highlighted] > &': { color: 'white' },
'[data-disabled] &': { color: mauve.mauve8 },
});
export const ContextMenuDemo = () => {
const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
const [urlsChecked, setUrlsChecked] = React.useState(false);
const [person, setPerson] = React.useState('pedro');
return (
<Box>
<ContextMenu>
<ContextMenuTrigger>
<Instruction>Right click here.</Instruction>
</ContextMenuTrigger>
<ContextMenuContent sideOffset={5} align="end">
<ContextMenuItem>
Back <RightSlot>⌘+[</RightSlot>
</ContextMenuItem>
<ContextMenuItem disabled>
Foward <RightSlot>⌘+]</RightSlot>
</ContextMenuItem>
<ContextMenuItem>
Reload <RightSlot>⌘+R</RightSlot>
</ContextMenuItem>
<ContextMenuSub>
<ContextMenuSubTrigger>
More Tools
<RightSlot>
<ChevronRightIcon />
</RightSlot>
</ContextMenuSubTrigger>
<ContextMenuSubContent sideOffset={2} alignOffset={-5}>
<ContextMenuItem>
Save Page As… <RightSlot>⌘+S</RightSlot>
</ContextMenuItem>
<ContextMenuItem>Create Shortcut…</ContextMenuItem>
<ContextMenuItem>Name Window…</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>Developer Tools</ContextMenuItem>
</ContextMenuSubContent>
</ContextMenuSub>
<ContextMenuSeparator />
<ContextMenuCheckboxItem checked={bookmarksChecked} onCheckedChange={setBookmarksChecked}>
<ContextMenuItemIndicator>
<CheckIcon />
</ContextMenuItemIndicator>
Show Bookmarks <RightSlot>⌘+B</RightSlot>
</ContextMenuCheckboxItem>
<ContextMenuCheckboxItem checked={urlsChecked} onCheckedChange={setUrlsChecked}>
<ContextMenuItemIndicator>
<CheckIcon />
</ContextMenuItemIndicator>
Show Full URLs
</ContextMenuCheckboxItem>
<ContextMenuSeparator />
<ContextMenuLabel>People</ContextMenuLabel>
<ContextMenuRadioGroup value={person} onValueChange={setPerson}>
<ContextMenuRadioItem value="pedro">
<ContextMenuItemIndicator>
<DotFilledIcon />
</ContextMenuItemIndicator>
Pedro Duarte
</ContextMenuRadioItem>
<ContextMenuRadioItem value="colm">
<ContextMenuItemIndicator>
<DotFilledIcon />
</ContextMenuItemIndicator>
Colm Tuite
</ContextMenuRadioItem>
</ContextMenuRadioGroup>
</ContextMenuContent>
</ContextMenu>
</Box>
);
};
export default ContextMenuDemo;

Features

  • Supports submenus with configurable reading direction.
  • Supports items, labels, groups of items.
  • Supports checkable items (single or multiple).
  • 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

Install the component from your command line.

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

Import all parts and piece them together.

import * as ContextMenu from '@radix-ui/react-context-menu';
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>
);

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

Contains all the parts of a context menu.

PropTypeDefault
direnumNo default value
onOpenChangefunctionNo default value
modalbooleantrue

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

PropTypeDefault
asChildbooleanfalse
Data AttributeValues
[data-state]"open" | "closed"

When used, portals the content part into the body.

PropTypeDefault
forceMountbooleanNo default value
containerHTMLElementdocument.body

The component that pops out in an open context menu.

PropTypeDefault
asChildbooleanfalse
loopbooleanfalse
onCloseAutoFocusfunctionNo default value
onEscapeKeyDownfunctionNo default value
onPointerDownOutsidefunctionNo default value
onFocusOutsidefunctionNo default value
onInteractOutsidefunctionNo default value
forceMountbooleanNo default value
alignOffsetnumber0
avoidCollisionsbooleantrue
collisionBoundaryBoundary[]
collisionPaddingnumber | Padding0
stickyenum"partial"
hideWhenDetachedbooleanfalse
Data AttributeValues
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS VariableDescription
--radix-context-menu-content-transform-originThe transform-origin computed from the content and arrow positions/offsets

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.

PropTypeDefault
asChildbooleanfalse
widthnumber10
heightnumber5

The component that contains the context menu items.

PropTypeDefault
asChildbooleanfalse
disabledbooleanNo default value
onSelectfunctionNo default value
textValuestringNo default value
Data AttributeValues
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

Used to group multiple ContextMenu.Items.

PropTypeDefault
asChildbooleanfalse

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

PropTypeDefault
asChildbooleanfalse

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

PropTypeDefault
asChildbooleanfalse
checkedbooleanNo default value
onCheckedChangefunctionNo default value
disabledbooleanNo default value
onSelectfunctionNo default value
textValuestringNo default value
Data AttributeValues
[data-state]"checked" | "unchecked"
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

Used to group multiple ContextMenu.RadioItems.

PropTypeDefault
asChildbooleanfalse
valuestringNo default value
onValueChangefunctionNo default value

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

PropTypeDefault
asChildbooleanfalse
value*stringNo default value
disabledbooleanNo default value
onSelectfunctionNo default value
textValuestringNo default value
Data AttributeValues
[data-state]"checked" | "unchecked"
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

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.

PropTypeDefault
asChildbooleanfalse
forceMountbooleanNo default value
Data AttributeValues
[data-state]"checked" | "unchecked"

Used to visually separate items in the context menu.

PropTypeDefault
asChildbooleanfalse

Contains all the parts of a submenu.

PropTypeDefault
defaultOpenbooleanNo default value
openbooleanNo default value
onOpenChangefunctionNo default value

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

PropTypeDefault
asChildbooleanfalse
disabledbooleanNo default value
textValuestringNo default value
Data AttributeValues
[data-state]"open" | "closed"
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

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

PropTypeDefault
asChildbooleanfalse
loopbooleanfalse
onEscapeKeyDownfunctionNo default value
onPointerDownOutsidefunctionNo default value
onFocusOutsidefunctionNo default value
onInteractOutsidefunctionNo default value
forceMountbooleanNo default value
sideOffsetnumber0
alignOffsetnumber0
avoidCollisionsbooleantrue
collisionBoundaryBoundary[]
collisionPaddingnumber | Padding0
arrowPaddingnumber0
stickyenum"partial"
hideWhenDetachedbooleanfalse
Data AttributeValues
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"

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>

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

import { styled } from '@stitches/react';
import * as ContextMenu from '@radix-ui/react-context-menu';
const StyledItem = styled(ContextMenu.Item, {
'&[data-disabled]': { color: 'gainsboro' },
});
export default () => (
<ContextMenu.Root>
<ContextMenu.Trigger></ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content>
<StyledItem disabled></StyledItem>
<StyledItem></StyledItem>
<StyledItem></StyledItem>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
);

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>

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>

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

import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as ContextMenu from '@radix-ui/react-context-menu';
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>
);
};

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

import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as ContextMenu from '@radix-ui/react-context-menu';
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>
);
};

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

import { styled } from '@stitches/react';
import * as ContextMenu from '@radix-ui/react-context-menu';
const Image = styled('img', {
width: 24,
height: 24,
});
export default () => (
<ContextMenu.Root>
<ContextMenu.Trigger></ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content>
<ContextMenu.Item>
<Image src="" />
Adolfo Hess
</ContextMenu.Item>
<ContextMenu.Item>
<Image src="" />
Miyah Myles
</ContextMenu.Item>
<ContextMenu.Item>
<Image src="" />
Sylvia Reynolds
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
);

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.

import { styled, keyframes } from '@stitches/react';
import * as ContextMenu from '@radix-ui/react-context-menu';
const scaleIn = keyframes({
'0%': { opacity: 0, transform: 'scale(0)' },
'100%': { opacity: 1, transform: 'scale(1)' },
});
const StyledContent = styled(ContextMenu.Content, {
transformOrigin: 'var(--radix-context-menu-content-transform-origin)',
animation: `${scaleIn} 0.5s ease-out`,
});
export default () => (
<ContextMenu.Root>
<ContextMenu.Trigger></ContextMenu.Trigger>
<ContextMenu.Portal>
<StyledContent></StyledContent>
</ContextMenu.Portal>
</ContextMenu.Root>
);

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.

import { styled, keyframes } from '@stitches/react';
import * as ContextMenu from '@radix-ui/react-context-menu';
const slideDown = keyframes({
'0%': { opacity: 0, transform: 'translateY(-10px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
});
const slideUp = keyframes({
'0%': { opacity: 0, transform: 'translateY(10px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
});
const StyledContent = styled(ContextMenu.Content, {
animationDuration: '0.6s',
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
'&[data-side="top"]': { animationName: slideUp },
'&[data-side="bottom"]': { animationName: slideDown },
});
export default () => (
<ContextMenu.Root>
<ContextMenu.Trigger></ContextMenu.Trigger>
<ContextMenu.Portal>
<StyledContent></StyledContent>
</ContextMenu.Portal>
</ContextMenu.Root>
);

Uses roving tabindex to manage focus movement among menu items.

KeyDescription
SpaceActivates the focused item.
EnterActivates the focused item.
ArrowDownMoves focus to the next item.
ArrowUpMoves focus to the previous item.
ArrowRightArrowLeftWhen focus is on ContextMenu.SubTrigger, opens or closes the submenu depending on reading direction.
EscCloses the context menu