Context Menu

Displays a menu to the user â€” such as a set of actions or functions â€” triggered by a button.

Installation

›pnpm dlx shadcn@latest add @evolphin/context-menu

Usage

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger>Right click</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Type Definitions

interface ContextMenuProps {
  /** Event handler called when the open state changes */
  onOpenChange?: (: boolean) => void;      
ContextMenuProps.onOpenChange?: ((open: boolean) => void) | undefined
Event handler called when the open state changes
}

Examples

Default

Right click here

API Reference

ContextMenu

Prop	Type	Default	Description
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.
`modal`	`boolean`	`true`	The modality of the context menu.

ContextMenuTrigger

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the trigger is disabled.

ContextMenuContent

Prop	Type	Default	Description
`forceMount`	`boolean`	-	Used to force mounting when more control is needed.
`alignOffset`	`number`	-	The distance from the trigger.
`className`	`string`	-	Additional CSS classes

ContextMenuItem

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the item is disabled.
`onSelect`	`(event: Event) => void`	-	Event handler called when the item is selected.
`inset`	`boolean`	`false`	Whether to indent the item.

ContextMenuCheckboxItem

Prop	Type	Default	Description
`checked`	`boolean \| "indeterminate"`	-	The controlled checked state of the item.
`onCheckedChange`	`(checked: boolean) => void`	-	Event handler called when the checked state changes.

ContextMenuRadioGroup

Prop	Type	Default	Description
`value`	`string`	-	The value of the selected item.
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes.

ContextMenuRadioItem

Prop	Type	Default	Description
`value`	`string`	-	The value of the item.

ContextMenuSubTrigger

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the trigger is disabled.
`inset`	`boolean`	`false`	Whether to indent the item.

Search

On this page