Context Menu

Right-click context menu with submenus, keyboard shortcuts, icons, and dot notation API.

Preview

Right-click here

Components

Installation

npx drivn add context-menu

Usage

1 import { ContextMenu } from "@/components/ui/context-menu"
2 import { Copy, Trash2 } from "lucide-react"
3 
4 export default function Page() {
5   return (
6     <ContextMenu>
7       <ContextMenu.Trigger>
8         <div>Right-click here</div>
9       </ContextMenu.Trigger>
10       <ContextMenu.Content>
11         <ContextMenu.Item icon={Copy}>
12           Copy
13         </ContextMenu.Item>
14         <ContextMenu.Item icon={Trash2} destructive>
15           Delete
16         </ContextMenu.Item>
17       </ContextMenu.Content>
18     </ContextMenu>
19   )
20 }

With Submenu

Right-click here

With Shortcuts

Right-click here

With Groups

Right-click here

Components

Actions

API Reference

ContextMenu

Prop	Type	Default	Description
`className`	string	—	Additional CSS classes to apply to the root container
`children`	ReactNode	—	ContextMenu sub-components (Trigger, Content)

ContextMenu.Item

Prop	Type	Default	Description
`onClick`	() => void	—	Callback fired when the item is clicked
`icon`	ComponentType \| ReactElement	—	Icon component (Edit) or element (<Edit className="..." />)
`shortcut`	string	—	Keyboard shortcut text displayed on the right
`destructive`	boolean	—	Applies destructive styling to the item
`disabled`	boolean	—	Disables the item interaction
`children`	ReactNode	—	Item label content

ContextMenu.Sub

Prop	Type	Default	Description
`children`	ReactNode	—	Sub-components (SubTrigger, SubContent)
`className`	string	—	Additional CSS classes to apply

ContextMenu.SubTrigger

Prop	Type	Default	Description
`icon`	ComponentType \| ReactElement	—	Icon displayed before the label
`children`	ReactNode	—	Trigger label content

ContextMenu.SubContent

Prop	Type	Default	Description
`children`	ReactNode	—	Submenu items
`className`	string	—	Additional CSS classes to apply

ContextMenu.Group

Prop	Type	Default	Description
`children`	ReactNode	—	Group content (Label, Item, Separator)
`className`	string	—	Additional CSS classes to apply

ContextMenu.Label

Prop	Type	Default	Description
`children`	ReactNode	—	Label text content
`className`	string	—	Additional CSS classes to apply

ContextMenu.Separator

Prop	Type	Default	Description
`className`	string	—	Additional CSS classes to apply

1	import { ContextMenu } from "@/components/ui/context-menu"
2	import { Copy, Trash2 } from "lucide-react"
3
4	export default function Page() {
5	return (
6	<ContextMenu>
7	<ContextMenu.Trigger>
8	<div>Right-click here</div>
9	</ContextMenu.Trigger>
10	<ContextMenu.Content>
11	<ContextMenu.Item icon={Copy}>
12	Copy
13	</ContextMenu.Item>
14	<ContextMenu.Item icon={Trash2} destructive>
15	Delete
16	</ContextMenu.Item>
17	</ContextMenu.Content>
18	</ContextMenu>
19	)
20	}