Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Menu de contexto

Menu de contexto com as ações de uma coisa só, abertas com o clique direito, um toque longo ou o teclado. É um atalho, então toda ação nele também precisa de um caminho visível.

Feito com Base UIPadrão WAI-ARIA MenuComponente clienteCódigo ↗

Instalação

Configure o Camaleo uma vez (Instalação) e importe as partes que precisar. O popup vai para um portal, na posição do ponteiro, e mantém o estilo, o modo e a cor da marca da página em volta.

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuSeparator } from "@camaleo/react";

Anatomia

O ContextMenu guarda o estado de aberto. O ContextMenuTrigger (data-slot="context-menu-trigger") é a área que a pessoa clica com o botão direito; o ContextMenuContent renderiza o popup abaixo num portal. Cada parte tem um data-slot que você pode usar no CSS.

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a marca da barra acima, e todos começam fechados: clique neles com o botão direito.

minimal · light · #3fa34d
Clique aqui com o botão direito, toque e segure na tela, ou foque e aperte Shift+F10
Relatório do 3º tri.pdf1,8 MB

Numa linha de arquivo

O uso clássico: as ações de um arquivo, onde o ponteiro já está. O tabIndex={0} deixa quem usa teclado focar a linha e abrir o menu com Shift+F10 ou a tecla Menu.

Clique com o botão direito num espaço vazio do quadro

Numa área de desenho

Num quadro vazio não há onde pôr um botão, então o clique direito é onde a pessoa procura. Mantenha os mesmos comandos numa barra de ferramentas.

Diagrama do checkoutQuadro · 1280 × 720

Grupos e separadores

Um ContextMenuGroupLabel em cada grupo ajuda a pessoa a percorrer um menu mais longo; o grupo destrutivo vem por último.

O frete é grátis em compras acima de R$ 250. Você pode devolver em até 30 dias após a entrega.

Com atalhos

Quem clica com o botão direito está aprendendo. Mostre o atalho com Kbd e use aria-keyshortcuts, para que da próxima vez a pessoa pule o menu.

Notas do kickoff — 03/11/2026

Agir e avisar

Clique na nota com o botão direito e escolha uma ação. O foco volta à nota, e uma linha com role="status" diz o que aconteceu.

Relatório do 3º tri.pdf

Também num menu visível

Um menu de contexto é escondido por natureza. Coloque as mesmas ações atrás de um botão "⋯", a partir de uma lista só, para quem usa toque, teclado ou leitor de tela encontrar.

Clique com o botão direito num espaço vazio do quadro
Zoom 100% · Mostrar grade: ligado · Alinhar à grade: desligado

Itens de marcar e de opção

Clique no quadro com o botão direito e mude as configurações: o ContextMenuCheckboxItem e o ContextMenuRadioItem mantêm o menu aberto e informam aria-checked, então dá para mudar várias de uma vez.

Contrato de locação 2027.pdfEntrada

Submenu

Ponha uma lista de destinos atrás de um item "Mover para" em vez de esticar o menu; → abre o submenu, ← volta, e a pasta atual fica desativada.

Em contexto

O menu de contexto acelera um trabalho que já tem um caminho visível. Estas são telas inteiras que você pode copiar, no estilo que escolheu.

  • Contrato de locação 2027.pdf2,4 MB
  • Orçamento 2027.xlsx860 KB
  • Planta baixa.png3,1 MB
Gerenciador de arquivosContextMenu · Menu · IconButton
Em revisão

Redesenhar a página de checkout

Prazo 12/11/2026 · Rafael Moreira

Cartão de kanbanCard · Badge · ContextMenu
RM
Rafael Moreira 10:42

O novo checkout está em homologação. Alguém consegue testar o campo de cupom antes de sexta?

Mensagem de chatAvatar · ContextMenu · Menu

Boas práticas

Orçamento 2027.xlsx
FaçaAs mesmas ações atrás de um botão visível.

O clique direito é um atalho para quem já conhece; o botão "⋯" é a entrada para todo mundo.

Orçamento 2027.xlsx
EviteAções só no clique direito.

Nada na tela diz que elas existem, e no celular ou com leitor de tela ninguém as encontra.

Vamos passar o lançamento para 18/11, assim o QA tem uma semana inteira.
FaçaAções da coisa sob o ponteiro.

Clique direito num comentário: responder, editar, copiar. O menu responde "o que posso fazer com isto?".

Vamos passar o lançamento para 18/11, assim o QA tem uma semana inteira.
EviteComandos do app inteiro.

Configurações e Sair não têm nada a ver com o comentário, e ficam no cabeçalho, onde a pessoa espera.

Props

PropriedadeTipoPadrãoDescrição
iconReactNode—Ícone antes do rótulo. Fica escondido do leitor de tela.
shortcutReactNode—Mostrado no fim, por exemplo "Ctrl D". Só exibe: as teclas você liga por conta própria.
tone"danger"—danger pinta uma ação destrutiva. Coloque por último, depois de um separador.
renderReactElement | (props, state) => ReactElement—Renderiza outro elemento, como um <a> para um link.
onClickfunction—Roda quando o item é escolhido com clique, Enter ou Espaço.
disabledbooleanfalseDesativa o item. Ele continua focável, para a pessoa conseguir ler.
labelstring—Texto para a busca por letra quando o conteúdo do item não é texto simples.
closeOnClickbooleantrueSe escolher o item fecha o menu.

Estas são as props do ContextMenuItem. O ContextMenu recebe as props da raiz do Base UI: open, onOpenChange, disabled e actionsRef. O ContextMenuCheckboxItem recebe checked, defaultChecked, onCheckedChange e shortcut; o ContextMenuRadioGroup recebe value, defaultValue e onValueChange, e cada ContextMenuRadioItem, um value. Envolva o ContextMenuSubTrigger e o ContextMenuSubContent num ContextMenuSub. O ContextMenuTrigger renderiza uma <div>: passe tabIndex={0} para ela receber foco, ou render para usar outro elemento.

Styling hooks

Mude o visual sem fazer fork: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio popup.

Atributos

data-popup-openno gatilho enquanto o menu está aberto
data-highlightedno item sob o teclado ou o mouse
data-checked · data-uncheckednos itens de marcar e de opção
data-disablednum item desativado
data-tonedanger

Tokens que ele lê

Cor

--cml-accent-text--cml-border--cml-border-control--cml-danger--cml-fg--cml-fg-muted--cml-item-highlight-fg--cml-item-highlight-shadow--cml-popover-bg--cml-popover-border--cml-shadow-popover--cml-surface-raised

Forma e tamanho

--cml-border-width--cml-font-size-field--cml-item-height--cml-item-padding--cml-popover-border-width--cml-popover-padding--cml-radius-item--cml-radius-popover

Tipografia e movimento

--cml-font-control--cml-font-field--cml-font-label--cml-font-weight-control

Só deste componente

--cml-context-menu-radius--cml-context-menu-width--cml-disabled-opacity--cml-item-check--cml-item-highlight--cml-menu-icons

Acessibilidade

Shift+F10 / MenuNo gatilho focado: abre o menu e leva o foco para ele.
↓ / ↑Vai para o primeiro ou o último item e depois anda entre eles, voltando ao início no fim.
Home / EndVai para o primeiro ou o último item.
A–ZVai para o próximo item que começa com a letra.
Enter / SpaceEscolhe o item; num item de marcar ou de opção, alterna e mantém o menu aberto.
→ / ←No gatilho de um submenu, → abre o submenu no primeiro item; dentro dele, ← fecha e volta.
EscFecha o submenu, ou o menu, e devolve o foco ao gatilho.
TabFecha o menu inteiro, com os submenus, e devolve o foco para onde estava.

Relacionados

MenuA mesma lista de ações, aberta por um botão visível.KbdMostra o atalho ao lado de cada ação.ButtonPara as uma ou duas ações mais usadas.
Esta página foi útil? · Editar esta página no GitHub