context-menu

71 notes in this subject, read out of this brain and free to use. This is page 1 of 2.

Context Menu SubTrigger data attributes

Context Menu SubTrigger element supports data-state attribute with values 'open' or 'closed', data-highlighted attribute (present when highlighted), and data-disabled attribute (present when disabled).

Context Menu SubContent props

Context Menu SubContent component has the following props: asChild (optional boolean, default false), loop (optional boolean, default false, when true keyboard navigation loops from last item to first and vice versa), onEscapeKeyDown ((event: KeyboardEvent) => void, called when escape key is down, preventable), onPointerDownOutside ((event: PointerDownOutsideEvent) => void, called when pointer event occurs outside bounds, preventable), onFocusOutside ((event: FocusOutsideEvent) => void, called when focus moves outside bounds, preventable), onInteractOutside ((event: PointerDownOutsideEvent | FocusOutsideEvent) => void, called on pointer or focus interaction outside bounds, preventable), forceMount (boolean, inherited from ContextMenu.Portal), sideOffset (number, default 0, distance in pixels from trigger), align ('start' | 'end', default 'start', direction submenu appears from anchor item, may change on collisions), alignOffset (number, default 0, offset in pixels from 'start' or 'end' alignment), avoidCollisions (boolean, default true, overrides side and align preferences to prevent collisions), collisionBoundary (Element | null | Array<Element | null>, default [], element used as collision boundary), collisionPadding (number | Partial<Record<Side, number>>, default 0, distance in pixels from boundary edges for collision detection), arrowPadding (number, default 0, padding between arrow and edges of content), sticky ('partial' | 'always', default 'partial', sticky behavior on align axis), hideWhenDetached (boolean, default false, whether to hide content when trigger becomes fully occluded). Must be rendered inside ContextMenu.Sub.

Context Menu SubContent data attributes

Context Menu SubContent element supports data-state attribute with values 'open' or 'closed', data-side attribute with values 'left', 'right', 'bottom', or 'top', and data-align attribute with values 'start', 'end', or 'center'.

Context Menu collision-aware animations example

To create collision and direction-aware animations, use data-side and data-align attributes which change at runtime to reflect collisions. Example: ```jsx // 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> ); ``` ```css /* 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); } } ```

Context Menu origin-aware animations example

To animate content from its computed origin based on side, sideOffset, align, alignOffset and collisions, use the --radix-context-menu-content-transform-origin CSS variable. Example: ```jsx // 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> ); ``` ```css /* 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); } } ```

Context Menu constrain content size with CSS variables example

To constrain the width of content to match trigger width and constrain height to not exceed viewport, use CSS custom properties. Example: ```jsx // 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> ); ``` ```css /* styles.css */ .ContextMenuContent { width: var(--radix-context-menu-trigger-width); max-height: var(--radix-context-menu-content-available-height); } ```

Context Menu with radio items example

To add radio items to a context menu, use ContextMenu.RadioGroup and ContextMenu.RadioItem with ContextMenu.ItemIndicator. Example: ```jsx 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> ); }; ```

Context Menu with checkbox items example

To add a checkbox item to a context menu, use ContextMenu.CheckboxItem with ContextMenu.ItemIndicator. Example: ```jsx 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.Separator /> <ContextMenu.CheckboxItem checked={checked} onCheckedChange={setChecked} > <ContextMenu.ItemIndicator> <CheckIcon /> </ContextMenu.ItemIndicator> Checkbox item </ContextMenu.CheckboxItem> </ContextMenu.Content> </ContextMenu.Portal> </ContextMenu.Root> ); }; ```

Context Menu with disabled items example

To style disabled items, use the data-disabled attribute. Example: ```jsx // 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> ); ``` ```css /* styles.css */ .ContextMenuItem[data-disabled] { color: gainsboro; } ```

Context Menu with submenus anatomy example

To create a context menu with submenus, use ContextMenu.Sub in combination with ContextMenu.SubTrigger, ContextMenu.Portal, and ContextMenu.SubContent. The ContextMenu.Arrow can be rendered inside ContextMenu.SubContent to visually link the trigger item with the submenu. Example structure: ```jsx <ContextMenu.Root> <ContextMenu.Trigger>…</ContextMenu.Trigger> <ContextMenu.Portal> <ContextMenu.Content> <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.Arrow /> </ContextMenu.SubContent> </ContextMenu.Portal> </ContextMenu.Sub> </ContextMenu.Content> </ContextMenu.Portal> </ContextMenu.Root> ```

Context Menu follows WAI-ARIA Menu pattern

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

Context Menu SubContent CSS variables

Context Menu SubContent supports the following CSS variables: --radix-context-menu-content-transform-origin (the transform-origin computed from content and arrow positions/offsets), --radix-context-menu-content-available-width (remaining width between trigger and boundary edge), --radix-context-menu-content-available-height (remaining height between trigger and boundary edge), --radix-context-menu-trigger-width (width of trigger), --radix-context-menu-trigger-height (height of trigger).

Context Menu triggers on right-click or long press

The Context Menu displays a menu located at the pointer, triggered by a right-click on desktop or a long press on touch devices.

Context Menu supports submenus with configurable reading direction

Context Menu supports submenus and allows configurable reading direction via the dir prop on Root, which can be 'ltr' or 'rtl'.

Context Menu supports multiple content types

Context Menu supports items, labels, groups of items, checkable items with optional indeterminate state, and radio groups.

Context Menu provides full keyboard navigation

Context Menu includes full keyboard navigation with typeahead support and roving tabindex to manage focus movement among menu items.

Context Menu Root props

Context Menu Root component has the following props: dir (optional, 'ltr' | 'rtl', inherits from DirectionProvider or defaults to LTR), open (boolean, controlled open state to be used with onOpenChange, intended for reading state and closing programmatically), onOpenChange ((open: boolean) => void), modal (optional boolean, default true, when true disables interaction with outside elements and only menu content visible to screen readers).

Context Menu Trigger props

Context Menu Trigger component has the following props: asChild (optional boolean, default false), disabled (optional boolean, default false, when true prevents context menu from opening on right-click and restores native context menu).

Context Menu Portal props

Context Menu Portal component has the following props: forceMount (boolean, used to force mounting when more control is needed, useful for controlling animation with React animation libraries, inherited by ContextMenu.Content and ContextMenu.SubContent), container (HTMLElement, default document.body, specifies container element to portal content into).

Context Menu Arrow props

Context Menu Arrow component has the following props: asChild (optional boolean, default false), width (number, default 10, width of arrow in pixels), height (number, default 5, height of arrow in pixels). Must be rendered inside ContextMenu.Content.

Context Menu Item data attributes

Context Menu Item element supports data-highlighted attribute (present when highlighted) and data-disabled attribute (present when disabled).

Context Menu Group props

Context Menu Group component has the following props: asChild (optional boolean, default false). Used to group multiple ContextMenu.Items.

Context Menu Label props

Context Menu Label component has the following props: asChild (optional boolean, default false). Used to render a label that won't be focusable using arrow keys.

Context Menu CheckboxItem props

Context Menu CheckboxItem component has the following props: asChild (optional boolean, default false), checked (boolean | 'indeterminate', controlled checked state to be used with onCheckedChange), onCheckedChange ((checked: boolean) => void, called when checked state changes), disabled (boolean, when true prevents user from interacting with item), onSelect ((event: Event) => void, called when user selects item via mouse or keyboard, calling event.preventDefault prevents menu from closing), textValue (string, optional text for typeahead purposes).

Context Menu CheckboxItem data attributes

Context Menu CheckboxItem element supports data-state attribute with values 'checked', 'unchecked', or 'indeterminate', data-highlighted attribute (present when highlighted), and data-disabled attribute (present when disabled).

Context Menu RadioGroup props

Context Menu RadioGroup component has the following props: asChild (optional boolean, default false), value (string, value of selected item in group), onValueChange ((value: string) => void, called when value changes). Used to group multiple ContextMenu.RadioItems.

Context Menu RadioItem props

Context Menu RadioItem component has the following props: asChild (optional boolean, default false), value (string, required, unique value of item), disabled (boolean, when true prevents user from interacting with item), onSelect ((event: Event) => void, called when user selects item via mouse or keyboard, calling event.preventDefault prevents menu from closing), textValue (string, optional text for typeahead purposes).

Context Menu RadioItem data attributes

Context Menu RadioItem element supports data-state attribute with values 'checked', 'unchecked', or 'indeterminate', data-highlighted attribute (present when highlighted), and data-disabled attribute (present when disabled).

Context Menu ItemIndicator props

Context Menu ItemIndicator component has the following props: asChild (optional boolean, default false), forceMount (boolean, used to force mounting when more control is needed, useful for controlling animation with React animation libraries). Renders when parent ContextMenu.CheckboxItem or ContextMenu.RadioItem is checked. Can be styled directly or used as wrapper for icon.

Context Menu ItemIndicator data attributes

Context Menu ItemIndicator element supports data-state attribute with values 'checked', 'unchecked', or 'indeterminate'.

Context Menu Separator props

Context Menu Separator component has the following props: asChild (optional boolean, default false). Used to visually separate items in context menu.

Context Menu Sub props

Context Menu Sub component has the following props: defaultOpen (boolean, open state of submenu when initially rendered, used when not controlling open state), open (boolean, controlled open state of submenu to be used with onOpenChange), onOpenChange ((open: boolean) => void, called when open state of submenu changes). Contains all parts of a submenu.

Context Menu SubTrigger props

Context Menu SubTrigger component has the following props: asChild (optional boolean, default false), disabled (boolean, when true prevents user from interacting with item), textValue (string, optional text for typeahead purposes). An item that opens a submenu. Must be rendered inside ContextMenu.Sub.

Context Menu disabled prop on Trigger

Add disabled prop to ContextMenu.Trigger.

Context Menu matching trigger size

Position Context Menu content correctly when matching trigger size.

Context menu first item focus on keyboard open

ContextMenu focuses the first item when opened via keyboard, aligning with WAI-ARIA spec.

Context Menu re-anchoring on re-trigger

Fixed a bug in Context Menu to ensure that the menu properly re-anchors to the latest pointer position when re-triggered in its open state.

Context Menu controlled open prop

Added support for a controlled open prop on ContextMenu.Root. This is intended for reading the open state and closing the menu programmatically. Opening the menu programmatically is discouraged, since opening it depends on user interaction to position the menu correctly.

Context Menu controlled example

Example of controlled Context Menu with open state: function ControlledContextMenu() { const [open, setOpen] = React.useState(false); return ( <ContextMenu.Root open={open} onOpenChange={setOpen}> <ContextMenu.Trigger>Open</ContextMenu.Trigger> <ContextMenu.Content> <button type="button" onClick={() => setOpen(false)}> Close me </button> <ContextMenu.Item>Item 1</ContextMenu.Item> <ContextMenu.Item>Item 2</ContextMenu.Item> </ContextMenu.Content> </ContextMenu.Root> ); }

Context Menu submenus expanded after re-opening on long-press touch

Fixed a bug where submenus remained expanded after re-opening on long-press touch events.

Context Menu CheckboxItem indeterminate state breaking change

Added support for indeterminate state on ContextMenu.CheckboxItem. This is a breaking change if you are currently using the CheckboxItem part and your codebase is written in TypeScript.

Context Menu position consistency RTL

Fix consistency issue with RTL positioning in Context Menu.

Context Menu initial animation Firefox Safari

Fix initial animation playback in Firefox and Safari for Context Menu.

Context Menu submenu CSS custom properties

Expose new CSS custom properties to enable size constraints in Context Menu.

Context Menu not exiting fullscreen on escape from submenu

Don't exit fullscreen mode when pressing escape to dismiss from submenu in Context Menu.

ContextMenu.Trigger data-state attribute

ContextMenu.Trigger has a data-state attribute.

ContextMenu nested structure changed to explicit parts

ContextMenu submenus must now be created using explicit parts instead of indirect nesting.

ContextMenu submenu support added

ContextMenu now supports submenus with ContextMenu.TriggerItem and ContextMenu.Arrow parts. A dir prop was added for RTL support with submenus.

ContextMenu removed side and align props

ContextMenu.Content no longer has side and align props.

ContextMenu sideOffset changed to alignOffset

ContextMenu.Content's sideOffset prop was changed to alignOffset to standardize vertical alignment for both root and sub-menus.

Context Menu and Dropdown Menu expose onCloseAutoFocus prop

Context Menu version 0.0.8 and Dropdown Menu version 0.0.8 exposed the onCloseAutoFocus prop.

Context Menu Trigger part

ContextMenu.Trigger wraps the element that will open the context menu when right-clicked or long-pressed.

Context Menu Content part

ContextMenu.Content is the component that pops out when the context menu is open.

Context Menu Label part

ContextMenu.Label is used to render a label. It will not be focusable using arrow keys.

Context Menu Item part

ContextMenu.Item is the component that contains the context menu items.

Context Menu Content variant prop

The variant prop on ContextMenu.Content customizes the visual style of the context menu. Accepted values are solid and soft.

Context Menu Content size prop

The size prop on ContextMenu.Content controls the size of the context menu. Accepted values are 1 and 2.

Context Menu Separator part

ContextMenu.Separator is used to separate groups of items in a context menu.

Context Menu SubContent part

ContextMenu.SubContent is the component that pops out when a submenu is open. It must be rendered inside ContextMenu.Sub.

Context Menu SubTrigger part

ContextMenu.SubTrigger is an item that opens a submenu. It must be rendered inside ContextMenu.Sub.

Give your agent this brain