Context Menu

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

Right click here.

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

Installation

Install the component from your command line.

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

Anatomy

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

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`	`enum`	No default value
`onOpenChange`	`function`	No default value
`modal`	`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`	`boolean`	`false`

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

Portal

When used, portals the content part into the body.

Prop	Type	Default
`forceMount`	`boolean`	No default value
`container`	`HTMLElement`	`document.body`

Content

The component that pops out in an open context menu.

Prop	Type	Default
`asChild`	`boolean`	`false`
`loop`	`boolean`	`false`
`onCloseAutoFocus`	`function`	No default value
`onEscapeKeyDown`	`function`	No default value
`onPointerDownOutside`	`function`	No default value
`onFocusOutside`	`function`	No default value
`onInteractOutside`	`function`	No default value
`forceMount`	`boolean`	No default value
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionBoundary`	`Boundary`	`[]`
`collisionPadding`	`number \| Padding`	`0`
`sticky`	`enum`	`"partial"`
`hideWhenDetached`	`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

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`	`boolean`	`false`
`width`	`number`	`10`
`height`	`number`	`5`

Item

The component that contains the context menu items.

Prop	Type	Default
`asChild`	`boolean`	`false`
`disabled`	`boolean`	No default value
`onSelect`	`function`	No default value
`textValue`	`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`	`boolean`	`false`

Label

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

Prop	Type	Default
`asChild`	`boolean`	`false`

CheckboxItem

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`checked`	`boolean`	No default value
`onCheckedChange`	`function`	No default value
`disabled`	`boolean`	No default value
`onSelect`	`function`	No default value
`textValue`	`string`	No default value

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

RadioGroup

Used to group multiple ContextMenu.RadioItems.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value`	`string`	No default value
`onValueChange`	`function`	No default value

RadioItem

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	No default value
`disabled`	`boolean`	No default value
`onSelect`	`function`	No default value
`textValue`	`string`	No default value

Data Attribute	Values
`[data-state]`	`"checked" \| "unchecked"`
`[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`	`boolean`	`false`
`forceMount`	`boolean`	No default value

Data Attribute	Values
`[data-state]`	`"checked" \| "unchecked"`

Separator

Used to visually separate items in the context menu.

Prop	Type	Default
`asChild`	`boolean`	`false`

Sub

Contains all the parts of a submenu.

Prop	Type	Default
`defaultOpen`	`boolean`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value

SubTrigger

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`disabled`	`boolean`	No default value
`textValue`	`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`	`boolean`	`false`
`loop`	`boolean`	`false`
`onEscapeKeyDown`	`function`	No default value
`onPointerDownOutside`	`function`	No default value
`onFocusOutside`	`function`	No default value
`onInteractOutside`	`function`	No default value
`forceMount`	`boolean`	No default value
`sideOffset`	`number`	`0`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionBoundary`	`Boundary`	`[]`
`collisionPadding`	`number \| Padding`	`0`
`arrowPadding`	`number`	`0`
`sticky`	`enum`	`"partial"`
`hideWhenDetached`	`boolean`	`false`

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

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.

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

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

With radio items

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

With complex items

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

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.

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

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

Collapsible

Dialog

Edit this page on GitHub.

Overview

Components

Utilities

Resources

Stitches

Colors

Icons