ContextMenu

Ações de um item pelo clique direito ou toque longo.

Playground

Clique com o botão direito

Item destrutivo

<ContextMenu>
  <ContextMenuTrigger>…área…</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Abrir</ContextMenuItem>
    <ContextMenuItem>Copiar link</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem className="text-destructive">Excluir</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Quando usar

✓Atalho de ações para quem já conhece (canvas, cards)

Evite quando

É o único caminho para a ação→ também um DropdownMenu ou botão visível — clique direito não é descobrível

Estados

openitem highlighteditem disabled

Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).

Acessibilidade

Papel: menu
Teclado: Shift+F10 / tecla de menu abre; setas navegam

Código

Partes: ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator

import

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "@/components/ui/context-menu";

Fonte: src/components/ui/context-menu.tsx · Resense (shadcn base-nova, Base UI)

Relacionados: DropdownMenu