Skip to Content

Context Menu

The Context Menu component offers contextual options or actions that appear when a user right-clicks an element

Examples

API

NameTypeDefault
childrenReactNode

Child element to trigger the context menu.

contentany

Content to show in the context menu.

disabledboolean

Whether the context menu is disabled.

autofocusboolean

Whether the context menu should autofocus on open.

true
autoCloseboolean

Whether the context menu should close on click.

true
triggerClassNamestring

Class name to apply to the trigger element.

triggerOpenClassNamestring

Class name to apply to the trigger when the context menu is open.

themeContextMenuTheme

Theme for the Context Menu.

referenceReferenceProp

Reference of the overlay to align to.

triggerTriggerTypes | TriggerTypes[]

Type of trigger to open the overlay.

'click'
triggerElementany

Trigger element to open the overlay.

portalClassNamestring

Portal classname.

closeOnBodyClickboolean

Close when the body is clicked or not.

true
closeOnEscapeboolean

Close when escape is pressed or not.

true
appendToBodyboolean

Append the overlay to the body. Almost always want this.

true
elementTypestring

Overlay element type.

modifiersModifiers

Position modifiers.

followCursorboolean

Overlay should follow cursor or not.

placementPlacement

Placement of the overlay.

'bottom'
onOpen(event?: any) => void

Event called when the overlay is opened.

onClose(event?: any) => void

Event called when the overlay is closed.

Last updated on