Context Menu

Displays a menu located at the pointer, triggered by a right-click or long press.

Source Code Radix UI

Installation


pnpm dlx radianui@latest add context-menu

Usage

Imports

components/ui/context-menu.tsx

import {
	ContextMenu,
	ContextMenuCheckboxItem,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuItem,
	ContextMenuLabel,
	ContextMenuRadioGroup,
	ContextMenuRadioItem,
	ContextMenuSeparator,
	ContextMenuShortcut,
	ContextMenuSub,
	ContextMenuSubContent,
	ContextMenuSubTrigger,
	ContextMenuTrigger,
} from "@/components/ui/context-menu"

Code

components/ui/context-menu.tsx

<ContextMenu>
	<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
		Right click here
	</ContextMenuTrigger>
	<ContextMenuContent className="w-48">
		<ContextMenuGroup>
			<ContextMenuItem>
				Back
				<ContextMenuShortcut>⌘[</ContextMenuShortcut>
			</ContextMenuItem>
			<ContextMenuItem disabled>
				Forward
				<ContextMenuShortcut>⌘]</ContextMenuShortcut>
			</ContextMenuItem>
			<ContextMenuItem>
				Reload
				<ContextMenuShortcut>⌘R</ContextMenuShortcut>
			</ContextMenuItem>
		</ContextMenuGroup>
		<ContextMenuSeparator />
		<ContextMenuGroup>
			<ContextMenuCheckboxItem checked>Show Bookmarks</ContextMenuCheckboxItem>
			<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
		</ContextMenuGroup>
	</ContextMenuContent>
</ContextMenu>

Examples

With Submenus

Use ContextMenuSub, ContextMenuSubTrigger, and ContextMenuSubContent to nest related actions.

With Keyboard Shortcuts

Add ContextMenuShortcut inside ContextMenuItem to display keyboard hints aligned to the right.

Right click here

With Checkboxes

Use ContextMenuCheckboxItem with checked and onCheckedChange for toggleable options.

Right click here

Inside a Dialog

Context menus work inside modals. Wrap your trigger area with ContextMenu within the dialog content.

Props

Name	Default	Values
External Reference	-	-

Name	Default	Values
asChild	false	boolean
External Reference	-	-

Name	Default	Values
align	start	startcenterend
alignOffset	0	number
sideOffset	0	number
External Reference	-	-

Name	Default	Values
inset	false	boolean
variant	default	defaulterror
External Reference	-	-

Name	Default	Values
checked	false	boolean
onCheckedChange	-	(checked: boolean) => void
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
value*	-	string
External Reference	-	-

Name	Default	Values
inset	false	boolean
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
inset	false	boolean
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
className	-	string

Name	Default	Values
External Reference	-	-

Name	Default	Values
External Reference	-	-