Context Menu

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

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 '@/ui/context-menu'
import { MenuContent, MenuItem } from '@/ui/menu'
import { Popover } from '@/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>

Anatomy

ContextMenu is a right-click / long-press trigger wrapping a Popover and a MenuContent. Items, submenus (MenuSub), and every menu concept come from the Menu component.

import { ContextMenu } from '@/ui/context-menu'
import { MenuContent, MenuItem, MenuSub } from '@/ui/menu'
import { Popover } from '@/ui/popover'
import { Separator } from '@/ui/separator'
;<ContextMenu>
  {/* trigger content */}
  <Popover>
    <MenuContent>
      <MenuItem />
      <Separator />
      <MenuSub />
    </MenuContent>
  </Popover>
</ContextMenu>

Open state

The menu is uncontrolled by default. Pass defaultOpen for uncontrolled state, or isOpen with onOpenChange to control it. Use isDisabled to suppress the trigger entirely.

const [isOpen, setIsOpen] = React.useState(false)

<ContextMenu isOpen={isOpen} onOpenChange={setIsOpen}>
  {/* ... */}
</ContextMenu>

Examples

Basic

Right click me

With Icons & Shortcuts

Right click me

Nested Context Menus

Outer area

Inner target

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 7/22/2026