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