structyl

Context Menu API

View component

The full prop reference for the Context Menu component. A menu triggered by right-click or long-press.

Import

tsx
import { ContextMenu } from '@structyl/styled';

Props

Root

Context menu root provider that manages open/closed state and modal behavior

PropTypeDefault
children#React.ReactNode

Child elements (Trigger, Portal, Content, etc.)

—
dir#'ltr' | 'rtl'

Text direction for the menu

—
onOpenChange#(open: boolean) => void

Called when menu open state changes

—
modal#boolean

Whether menu operates in modal mode (traps focus, disables outside interaction)

true

Trigger

Right-click or long-press trigger element for opening the context menu

PropTypeDefault
asChild#boolean

Render as child element instead of wrapping in span

—
disabled#boolean

Disables the trigger

—
className#string

CSS class name

—
onContextMenu#(event: React.MouseEvent) => void

Right-click event handler (composed with internal handler)

—
onPointerDown#(event: React.PointerEvent) => void

Pointer down event handler (composed with internal handler)

—
onPointerMove#(event: React.PointerEvent) => void

Pointer move event handler (composed with internal handler)

—
onPointerCancel#(event: React.PointerEvent) => void

Pointer cancel event handler (composed with internal handler)

—
onPointerUp#(event: React.PointerEvent) => void

Pointer up event handler (composed with internal handler)

—
style#React.CSSProperties

Inline styles (composed with WebkitTouchCallout: 'none')

—

Portal

Portal container for rendering menu content outside DOM hierarchy

PropTypeDefault
children#React.ReactNode

Child elements to portal

—
container#Element | DocumentFragment | null

DOM element to portal into

—
forceMount#boolean

Force mounting of content regardless of open state

—

Content

Menu content wrapper with positioning, animations, and dismiss behavior (automatically portalled)

PropTypeDefault
className#string

CSS class name

—
asChild#boolean

Render as child element

—
forceMount#boolean

Force mounting of content

—
loop#boolean

Enable keyboard navigation looping

—
onCloseAutoFocus#(event: Event) => void

Called when menu closes and focus returns

—
onEscapeKeyDown#(event: KeyboardEvent) => void

Called when Escape key is pressed

—
onPointerDownOutside#(event: PointerDownOutsideEvent) => void

Called when pointer down occurs outside content

—
onFocusOutside#(event: FocusOutsideEvent) => void

Called when focus moves outside content

—
onInteractOutside#(event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Called when any interaction occurs outside content

—
side#'top' | 'right' | 'bottom' | 'left'

Preferred side to anchor menu (auto-adjusted)

'bottom'
sideOffset#number

Distance from trigger to content

2
align#'start' | 'center' | 'end'

Alignment relative to trigger

'start'
alignOffset#number

Additional offset for alignment

—
avoidCollisions#boolean

Automatically adjust position to avoid collisions

—
collisionBoundary#Element | Element[] | null

Element(s) to use as collision boundary

—
collisionPadding#number

Padding to maintain from collision boundary

—
strategy#'fixed' | 'absolute'

Positioning strategy

—
sticky#'partial' | 'always'

Stick behavior when scrolling

—
hideWhenDetached#boolean

Hide content when detached from trigger

—
updatePositionStrategy#'always' | 'optimized'

Position update strategy

—

Item

Menu item with support for disabled state and custom selection

PropTypeDefault
className#string

CSS class name

—
inset#boolean

Add left padding for alignment with checkboxes/radios (styled wrapper only)

—
asChild#boolean

Render as child element

—
disabled#boolean

Disable the item

—
onSelect#(event: Event) => void

Called when item is selected

—
textValue#string

Text value for keyboard search

—

Group

Group container for organizing menu items

PropTypeDefault
className#string

CSS class name

—
asChild#boolean

Render as child element

—

Label

Non-interactive label for grouping menu sections

PropTypeDefault
className#string

CSS class name

—
inset#boolean

Add left padding for alignment (styled wrapper only)

—
asChild#boolean

Render as child element

—

Separator

Visual separator between menu item groups

PropTypeDefault
className#string

CSS class name

—
asChild#boolean

Render as child element

—

Sub

Submenu container with independent open state

PropTypeDefault
children#React.ReactNode

SubTrigger and SubContent elements

—
open#boolean

Controlled open state

—
defaultOpen#boolean

Default open state for uncontrolled mode

—
onOpenChange#(open: boolean) => void

Called when submenu open state changes

—

SubTrigger

Trigger for opening submenu with chevron icon

PropTypeDefault
className#string

CSS class name

—
inset#boolean

Add left padding for alignment (styled wrapper only)

—
asChild#boolean

Render as child element

—
disabled#boolean

Disable the submenu trigger

—
onSelect#(event: Event) => void

Called when submenu trigger is selected

—
textValue#string

Text value for keyboard search

—

SubContent

Submenu content container with auto-positioning

PropTypeDefault
className#string

CSS class name

—
asChild#boolean

Render as child element

—
forceMount#boolean

Force mounting of content

—
loop#boolean

Enable keyboard navigation looping

—
onCloseAutoFocus#(event: Event) => void

Called when submenu closes and focus returns

—
onEscapeKeyDown#(event: KeyboardEvent) => void

Called when Escape key is pressed

—
onPointerDownOutside#(event: PointerDownOutsideEvent) => void

Called when pointer down occurs outside content

—
onFocusOutside#(event: FocusOutsideEvent) => void

Called when focus moves outside content

—
onInteractOutside#(event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Called when any interaction occurs outside content

—
sideOffset#number

Distance from trigger to content

—
alignOffset#number

Additional offset for alignment

—
avoidCollisions#boolean

Automatically adjust position to avoid collisions

—
collisionBoundary#Element | Element[] | null

Element(s) to use as collision boundary

—
collisionPadding#number

Padding to maintain from collision boundary

—
strategy#'fixed' | 'absolute'

Positioning strategy

—
sticky#'partial' | 'always'

Stick behavior when scrolling

—
hideWhenDetached#boolean

Hide content when detached from trigger

—
updatePositionStrategy#'always' | 'optimized'

Position update strategy

—

CheckboxItem

Menu item with checkbox state indicator

PropTypeDefault
className#string

CSS class name

—
asChild#boolean

Render as child element

—
disabled#boolean

Disable the item

—
checked#boolean | 'indeterminate'

Checkbox checked state

false
onCheckedChange#(checked: boolean) => void

Called when checkbox state changes

—
onSelect#(event: Event) => void

Called when item is selected

—
textValue#string

Text value for keyboard search

—

RadioGroup

Radio group container for mutually exclusive menu items

PropTypeDefault
className#string

CSS class name

—
value#string

Current selected radio item value

—
onValueChange#(value: string) => void

Called when radio selection changes

—
asChild#boolean

Render as child element

—

RadioItem

Menu item with radio button state indicator

PropTypeDefault
className#string

CSS class name

—
value#string

Radio item value (required)

—
asChild#boolean

Render as child element

—
disabled#boolean

Disable the item

—
onSelect#(event: Event) => void

Called when item is selected

—
textValue#string

Text value for keyboard search

—

ItemIndicator

Conditional indicator shown for checked checkbox/radio items

PropTypeDefault
className#string

CSS class name

—
forceMount#boolean

Force mounting regardless of checked state

—
asChild#boolean

Render as child element

—

Source code

If you didn't find what you need here, read the component implementation .

structyl — Accessible React Component Library