Visão geral

Clique com o botão direito na área abaixo para ver o Context Menu em ação.

Demo básica (clique com botão direito)

Import

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem } from "@/components/ui/context-menu"

Variações

O ContextMenu suporta itens simples, submenus, checkboxes e radio groups.

Menu para item de lista

Padrão de implementação

Snippets para os usos mais comuns do Context Menu.

Context Menu básico

<ContextMenu>
  <ContextMenuTrigger>
    <div>Clique com o botão direito</div>
  </ContextMenuTrigger>
  <ContextMenuContent className="w-48">
    <ContextMenuItem>Editar</ContextMenuItem>
    <ContextMenuItem>Duplicar</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem className="text-destructive">
      Excluir
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Com submenu

<ContextMenuSub>
  <ContextMenuSubTrigger>Compartilhar</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuItem>Por e-mail</ContextMenuItem>
    <ContextMenuItem>Copiar link</ContextMenuItem>
  </ContextMenuSubContent>
</ContextMenuSub>

Props e uso

API dos sub-componentes do Context Menu.

Sub-componentes

ContextMenu

Container raiz sem UI própria.

ContextMenuTrigger

Área que responde ao clique direito.

ContextMenuContent

Painel flutuante do menu. Use w-* para controlar largura.

ContextMenuItem

Item clicável. Aceita disabled e onSelect.

ContextMenuCheckboxItem

Item com estado checked. Para toggles visuais.

ContextMenuRadioGroup + RadioItem

Grupo de seleção única.

ContextMenuSub

Container para submenu aninhado.

ContextMenuShortcut

Texto de atalho de teclado à direita.

Acessibilidade

O componente usa role="menu" e role="menuitem" automaticamente.

Navegação por teclado: setas para mover, Enter/Space para selecionar, Escape para fechar, seta direita para abrir submenu.

Ações destrutivas devem sempre ter cor text-destructive e estar separadas das demais por um ContextMenuSeparator.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter