Context Menu

A context menu displays a list of actions at the pointer position.

Right click me

<ContextMenu
  data-testid="context-menu-basic"
  className="bg-bg-muted flex h-32 w-64 items-center justify-center rounded-md border border-dashed text-sm text-fg-muted"
>
  Right click me
  <Popover>
    <MenuContent>
      <MenuItem>Account settings</MenuItem>
      <MenuItem>Create team</MenuItem>
      <MenuItem>Command menu</MenuItem>
      <MenuItem>Log out</MenuItem>
    </MenuContent>
  </Popover>
</ContextMenu>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/context-menu

Usage

Use context menus to display actions when a user right clicks an element.

import { ContextMenu } from "@/components/ui/context-menu";
import { MenuContent, MenuItem } from "@/components/ui/menu";
import { Popover } from "@/components/ui/popover";

<ContextMenu
	overlay={
		<Popover>
			<MenuContent>
				<MenuItem>Account settings</MenuItem>
				<MenuItem>Create team</MenuItem>
				<MenuItem>Command menu</MenuItem>
				<MenuItem>Log out</MenuItem>
			</MenuContent>
		</Popover>
	}
>
	Right click me
</ContextMenu>

Examples

Right click me

API Reference

ContextMenu

A context menu opens a menu at the pointer position when the trigger element receives a contextmenu event.

Supports all div attributes.

Prop	Type	Default
	`ReactNode`	`—`
	`boolean`	`—`

Last updated on 5/22/2026