Context Menu

modal

boolean

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.

loop

boolean

false

When true, keyboard navigation will loop from last item to first, and vice versa.

onCloseAutoFocus

function (event: Event) => void

Event handler called when focus moves back after closing. It can be prevented by calling event.preventDefault.

onEscapeKeyDown

function (event: KeyboardEvent) => void

Event handler called when the escape key is down. It can be prevented by calling event.preventDefault

onPointerDownOutside

function (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.

onFocusOutside

function (event: FocusOutsideEvent) => void

Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.

onInteractOutside

function (event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.

alignOffset

number

0

The vertical distance in pixels from the anchor.

avoidCollisions

boolean

true

When true, overrides the side andalign preferences to prevent collisions with boundary edges.

collisionBoundary

Boundary (Element | null | Array<Element | null>)

[]

The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.

collisionPadding

number | Padding number | Partial<Record<Side, number>>

0

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.

sticky

enum "partial" | "always"

"partial"

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.

disabled

boolean

false

When true, the context menu won't open when right-clicking. Note that this will also restore the native context menu.

disabled

boolean

When true, prevents the user from interacting with the item.

onSelect

function (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.

disabled

boolean

When true, prevents the user from interacting with the item.

onSelect

function (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.

disabled

boolean

When true, prevents the user from interacting with the item.

onValueChange

function (value: string) => void

Event handler called when the value changes.

value*

string

The unique value of the item.

disabled

boolean

When true, prevents the user from interacting with the item.

onSelect

function (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.

defaultOpen

boolean

The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.

open

boolean

The controlled open state of the submenu. Must be used in conjunction with onOpenChange.

onOpenChange

function (open: boolean) => void

Event handler called when the open state of the submenu changes.

disabled

boolean

false

When true, the context menu won't open when right-clicking. Note that this will also restore the native context menu.

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.

loop

boolean

false

When true, keyboard navigation will loop from last item to first, and vice versa.

onCloseAutoFocus

function (event: Event) => void

Event handler called when focus moves back after closing. It can be prevented by calling event.preventDefault.

onEscapeKeyDown

function (event: KeyboardEvent) => void

Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.

onPointerDownOutside

function (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.

onFocusOutside

function (event: FocusOutsideEvent) => void

Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.

onInteractOutside

function (event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.

alignOffset

number

0

The vertical distance in pixels from the anchor.

avoidCollisions

boolean

true

When true, overrides the side andalign preferences to prevent collisions with boundary edges.

collisionBoundary

Boundary Element | null | Array<Element | null>

[]

The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.

collisionPadding

number | Padding

0

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.

arrowPadding

number

0

The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.

sticky

enum "partial" | "always"

"partial"

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.