Context Menu

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

On this page

Right click me

<ContextMenu 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

Wrap the trigger content and the menu's Popover inside ContextMenu. The menu opens at the pointer when the trigger is right-clicked, or after a long press on touch devices.

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

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

Examples

Right click me

Right click for submenu

Right click me

state: closed

Outer area

Inner target

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 6/27/2026