Context Menu
A right-click menu that displays a list of actions or options.
When To Use
Use the Context Menu component when you want to provide a custom menu that appears on right-click (or long-press on touch devices). It's useful for:
- Providing contextual actions specific to an element
- Offering shortcuts to common operations
- Creating custom right-click menus for different elements
- Replacing the default browser context menu
- Implementing power-user features
Context menus provide efficient access to actions that are relevant to the specific element being interacted with.
Examples
Right click here
Projects FolderRight click to view options
Right click to view options
Selected view: Grid
Options: Show Hidden
Beautiful Sunset
Photo by John Doe
Right click to view more options
Props
ContextMenu
| Prop | Type | Default |
|---|---|---|
modal? | boolean | - |
onOpenChange? | ((open: boolean) => void) | - |
ContextMenuTrigger
| Prop | Type | Default |
|---|---|---|
disabled? | boolean | - |
asChild? | boolean | - |
key? | Key | null | - |
ContextMenuContent
| Prop | Type | Default |
|---|---|---|
forceMount? | true | - |
onInteractOutside? | ((event: PointerDownOutsideEvent | FocusOutsideEvent) => void) | - |
onFocusOutside? | ((event: FocusOutsideEvent) => void) | - |
onPointerDownOutside? | ((event: PointerDownOutsideEvent) => void) | - |
onEscapeKeyDown? | ((event: KeyboardEvent) => void) | - |
loop? | boolean | false |
onCloseAutoFocus? | ((event: Event) => void) | - |
updatePositionStrategy? | "always" | "optimized" | - |
hideWhenDetached? | boolean | - |
sticky? | "partial" | "always" | - |
collisionPadding? | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | - |
collisionBoundary? | Boundary | Boundary[] | - |
avoidCollisions? | boolean | - |
arrowPadding? | number | - |
alignOffset? | number | - |
asChild? | boolean | - |
key? | Key | null | - |
ContextMenuItem
| Prop | Type | Default |
|---|---|---|
textValue? | string | - |
disabled? | boolean | - |
asChild? | boolean | - |
key? | Key | null | - |
ContextMenuCheckboxItem
| Prop | Type | Default |
|---|---|---|
onCheckedChange? | ((checked: boolean) => void) | - |
checked? | CheckedState | - |
textValue? | string | - |
disabled? | boolean | - |
asChild? | boolean | - |
key? | Key | null | - |
ContextMenuRadioItem
| Prop | Type | Default |
|---|---|---|
value | string | - |
textValue? | string | - |
disabled? | boolean | - |
asChild? | boolean | - |
key? | Key | null | - |
ContextMenuLabel
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
key? | Key | null | - |
ContextMenuSeparator
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
key? | Key | null | - |
ContextMenuShortcut
| Prop | Type | Default |
|---|