Displays a menu located at the pointer, triggered by a right click or a long press.
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
Install the component from your command line.
Import all parts and piece them together.
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.
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).
When used, portals the content part into the body
.
The component that pops out in an open context menu.
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
.
The component that contains the context menu items.
Used to group multiple ContextMenu.Item
s.
Used to render a label. It won't be focusable using arrow keys.
An item that can be controlled and rendered like a checkbox.
Used to group multiple ContextMenu.RadioItem
s.
An item that can be controlled and rendered like a radio.
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.
Used to visually separate items in the context menu.
Contains all the parts of a submenu.
An item that opens a submenu. Must be rendered inside ContextMenu.Sub
.
The component that pops out when a submenu is open. Must be rendered inside ContextMenu.Sub
.
You can create submenus by using ContextMenu.Sub
in combination with its parts.
You can add special styles to disabled items via the data-disabled
attribute.
Use the Separator
part to add a separator between items.
Use the Label
part to help label a section.
Use the CheckboxItem
part to add an item that can be checked.
Use the RadioGroup
and RadioItem
parts to add an item that can be checked amongst others.
You can add extra decorative elements in the Item
parts, such as images.
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.
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.
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.
Uses roving tabindex to manage focus movement among menu items.