Skip to main content

​
Overview

A context menu is displayed when the user right-clicks or long-presses on a trigger element, providing contextual actions.

​
Features

  • Supports submenus with configurable reading direction
  • Supports items, labels, groups of items
  • Supports checkable items (single or multiple)
  • Customize side, alignment, offsets, collision handling
  • Focus is fully managed
  • Full keyboard navigation
  • Typeahead support
  • Optional modal or non-modal mode

​
Installation

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.Arrow />
      </ContextMenu.Content>
    </ContextMenu.Portal>
  </ContextMenu.Root>
);

​
API Reference

​
Root

Contains all the parts of a context menu.
​
onOpenChange
(open: boolean) => void
Event handler called when the open state of the context menu changes.
​
dir
'ltr' | 'rtl'
The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
​
modal
boolean
default:"true"
The modality of the context menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.

​
Trigger

The area that opens the context menu. Wrap it around the target you want the context menu to open from when right-clicking.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
disabled
boolean
default:"false"
When true, the context menu won’t open and will show the browser’s default context menu.

​
Portal

When used, portals the content part into the body.
​
container
HTMLElement
default:"document.body"
Specify a container element to portal the content into.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

​
Content

The component that pops out when the context menu is open.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
loop
boolean
default:"false"
When true, keyboard navigation will loop from last item to first, and vice versa.
​
onCloseAutoFocus
(event: Event) => void
Event handler called when focus moves back to the trigger after closing. It can be prevented by calling event.preventDefault.
​
onEscapeKeyDown
(event: KeyboardEvent) => void
Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
​
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
​
onInteractOutside
(event: PointerDownOutsideEvent | FocusOutsideEvent) => void
Event handler called when an interaction happens outside the bounds of the component. It can be prevented by calling event.preventDefault.

​
Item

The component that contains the context menu items.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
disabled
boolean
default:"false"
When true, prevents the user from interacting with the item.
​
onSelect
(event: Event) => void
Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the context menu from closing when selecting that item.
​
textValue
string
Optional text used for typeahead purposes. By default, the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.

​
Group

Used to group multiple items. Use in conjunction with ContextMenu.Label to ensure good accessibility via automatic labelling.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.

​
Label

Used to render a label. It won’t be focusable using arrow keys.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.

​
CheckboxItem

An item that can be controlled and rendered like a checkbox.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
checked
boolean | 'indeterminate'
The controlled checked state of the item. Must be used in conjunction with onCheckedChange.
​
onCheckedChange
(checked: boolean) => void
Event handler called when the checked state changes.
​
disabled
boolean
default:"false"
When true, prevents the user from interacting with the item.
​
onSelect
(event: Event) => void
Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the context menu from closing when selecting that item.
​
textValue
string
Optional text used for typeahead purposes.

​
RadioGroup

Used to group multiple ContextMenu.RadioItems.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
value
string
The value of the selected item in the group.
​
onValueChange
(value: string) => void
Event handler called when the value changes.

​
RadioItem

An item that can be controlled and rendered like a radio.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
value
string
required
The unique value of the item.
​
disabled
boolean
default:"false"
When true, prevents the user from interacting with the item.
​
onSelect
(event: Event) => void
Event handler called when the user selects an item (via mouse or keyboard).
​
textValue
string
Optional text used for typeahead purposes.

​
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.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

​
Separator

Used to visually separate items in the context menu.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.

​
Sub

Contains all the parts of a submenu.
​
open
boolean
The controlled open state of the submenu. Must be used in conjunction with onOpenChange.
​
defaultOpen
boolean
The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
​
onOpenChange
(open: boolean) => void
Event handler called when the open state of the submenu changes.

​
SubTrigger

An item that opens a submenu. Must be rendered inside ContextMenu.Sub.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
disabled
boolean
default:"false"
When true, prevents the user from interacting with the item.
​
textValue
string
Optional text used for typeahead purposes.

​
SubContent

The component that pops out when a submenu is open. Must be rendered inside ContextMenu.Sub.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
loop
boolean
default:"false"
When true, keyboard navigation will loop from last item to first, and vice versa.
​
onEscapeKeyDown
(event: KeyboardEvent) => void
Event handler called when the escape key is down.
​
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
Event handler called when a pointer event occurs outside the bounds of the component.

​
Arrow

An optional arrow element to render alongside the context menu.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
width
number
default:"10"
The width of the arrow in pixels.
​
height
number
default:"5"
The height of the arrow in pixels.

​
Example

import * as ContextMenu from '@radix-ui/react-context-menu';

function ContextMenuDemo() {
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger className="context-menu-trigger">
        Right click here
      </ContextMenu.Trigger>
      <ContextMenu.Portal>
        <ContextMenu.Content className="context-menu-content">
          <ContextMenu.Item className="context-menu-item">
            Back
          </ContextMenu.Item>
          <ContextMenu.Item className="context-menu-item">
            Forward
          </ContextMenu.Item>
          <ContextMenu.Item className="context-menu-item">
            Reload
          </ContextMenu.Item>
          <ContextMenu.Separator className="context-menu-separator" />
          <ContextMenu.Item className="context-menu-item">
            Save Page As...
          </ContextMenu.Item>
        </ContextMenu.Content>
      </ContextMenu.Portal>
    </ContextMenu.Root>
  );
}

​
Accessibility

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

​
Keyboard Interactions

  • Space - Activates the focused item
  • Enter - Activates the focused item
  • ArrowDown - Moves focus to the next item
  • ArrowUp - Moves focus to the previous item
  • ArrowRight - Opens a submenu or moves focus to the next item in a submenu
  • ArrowLeft - Closes a submenu or moves to the parent menu
  • Esc - Closes the context menu

Build docs developers (and LLMs) love

Get started for freeTalk to us