ContextMenu
Opens contextual commands from pointer or keyboard coordinates.
Contract
| Decision | Choose |
|---|---|
| target | a focusable Trigger that accepts right-click, long press, Shift+F10, or the Context Menu key |
| item | enabled, disabled, semantic link, or a persistent selection item |
| variant | default for ordinary commands or danger for destructive commands |
| position | pointer coordinates by default, or an explicit Positioner.anchor override |
| touch | provide a visible button that opens the same commands |
Use TRMenu instead when a dedicated button is the primary trigger.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/context-menu.css';Scroll inside the code area to read long lines.
Imports
import { TRContextMenu } from '@tinyrack/ui/components/context-menu';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Choose item behavior
Choose keyboard direction
Choose how users open it
Choose the positioning reference
API
TRContextMenu.Root
Controls open / defaultOpen, onOpenChange, orientation, focus looping, modality, and root disabled. Open-change details expose the Base UI reason and event; root actions are publicly typed.
TRContextMenu.Trigger
Defines the context target. Keep it focusable for Shift+F10 and the platform Context Menu key.
TRContextMenu.Portal
Moves overlay anatomy to document.body or a custom container and supports keepMounted.
TRContextMenu.Backdrop
Provides the transparent modal interaction layer.
TRContextMenu.Positioner
Uses captured pointer or keyboard coordinates. anchor overrides that point; nested positioners anchor to their submenu trigger.
TRContextMenu.Popup
Renders the menu surface with roving focus, typeahead, and constrained scrolling.
TRContextMenu.Arrow
Renders an optional arrow toward the anchor.
TRContextMenu.Group
Groups related commands.
TRContextMenu.GroupLabel
Provides an accessible group label.
TRContextMenu.Item
Runs a command. variant is 'default' | 'danger' with default 'default'; disabled blocks activation and closeOnClick controls dismissal.
TRContextMenu.LinkItem
Renders semantic navigation with href; use closeOnClick when navigation should dismiss.
TRContextMenu.CheckboxItem
Owns controlled or uncontrolled boolean selection.
TRContextMenu.CheckboxItemIndicator
Renders while its checkbox item is checked unless kept mounted.
TRContextMenu.RadioGroup
Owns one selected value.
TRContextMenu.RadioItem
Represents one radio value.
TRContextMenu.RadioItemIndicator
Renders while its radio item is selected unless kept mounted.
TRContextMenu.SubmenuRoot
Owns nested open state and Escape behavior.
TRContextMenu.SubmenuTrigger
Opens a submenu with pointer or keyboard input.
TRContextMenu.Separator
Separates command groups visually.
Every part, prop type, and state type is exported from @tinyrack/ui/components/context-menu; Base UI render composition, refs, native props, events, and state data attributes are preserved. CSS is opt-in.