Menu
Menu — uma lista de ações que abre a partir de um botão. Use para guardar as ações secundárias de uma linha, um card ou uma barra de ferramentas, não para navegar nem para escolher um valor.
Instalação
Configure o Camaleo uma vez (Instalação) e importe as partes que precisar. O popup vai para um portal e mantém o estilo, o modo e a cor da marca da página em volta.
import { Menu, MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator } from "@camaleo/react";Anatomia
O Menu guarda o estado de aberto. O MenuTrigger é o botão (data-slot="menu-trigger", ou o slot do próprio Button quando você passa render={<Button />}); o MenuContent 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.
Com atalhos
Mostre o atalho com Kbd para a pessoa aprender enquanto usa o menu, e use aria-keyshortcuts para o leitor de tela anunciar também. O menu só exibe o atalho: as teclas você liga por conta própria.
Grupos e separadores
Passando de cinco ou seis itens, um MenuGroupLabel em cada grupo deixa a pessoa pular direto para a parte certa em vez de ler tudo.
Itens de marcar
Liga e desliga opções. O MenuCheckboxItem continua aberto depois do clique e informa aria-checked, então o leitor de tela diz "marcado" ou "desmarcado".
Agir e avisar
Escolha uma ação. O foco volta ao gatilho, e uma linha com role="status" conta ao leitor de tela o que aconteceu, porque o menu que mostrava a ação sumiu.
Destrutiva, com confirmação
Escolha "Excluir projeto". Ele vem por último, depois de um separador, e abre um AlertDialog; o finalFocus devolve o foco ao botão do menu quando ele fecha.
Desativado, com o motivo
Mantenha a ação indisponível no menu para a pessoa saber que ela existe, e diga o porquê no próprio item: o motivo é lido junto com o nome.
Gatilho só com ícone
Um botão "⋯" não tem texto, então o aria-label diz de que são as ações: "Ações da fatura INV-4029", e não só "Mais".
Links como itens
Para algumas páginas relacionadas, como num menu de ajuda, passe render={<a href="…" />} ao item: ele abre com Enter, e o navegador consegue abrir numa nova aba.
Itens de opção e submenu
Para uma configuração de exibição com uma escolha só, como lista ou grade, use o MenuRadioItem; guarde um grupo maior, como a ordenação, num MenuSub que abre com → e fecha com ←.
Em contexto
O menu tira as ações secundárias do caminho. Estas são telas inteiras que você pode copiar, no estilo que escolheu.
| Fatura | Cliente | Situação | Valor | |
|---|---|---|---|---|
| INV-4029 | Padaria Pão Dourado | Paga | R$ 4.250,00 | |
| INV-4028 | Café Porto Azul | Pendente | R$ 1.180,50 | |
| INV-4027 | Estúdio Lume | Pendente | R$ 12.900,00 |
Contrato de locação 2027.pdf
2,4 MB · Editado em 14/10/2026
Boas práticas
"Renomear", "Duplicar", "Mover para pasta…": a pessoa sabe o que cada item faz antes de escolher.
Depois do clique o gatilho continua dizendo "País", e o formulário não recebe nada. Use um Select; para ir a outras páginas, use links ou um NavigationMenu.
O item vermelho fica longe de um ↓ Enter apressado, e a cor mostra que ele é diferente.
Um deslize do mouse ou das setas e a coisa errada some.
Props
danger pinta uma ação destrutiva. Coloque por último, depois de um separador.<a> para um link.Estas são as props do MenuItem. O Menu recebe as props da raiz do Base UI: open, onOpenChange, modal e disabled. O MenuCheckboxItem recebe checked, defaultChecked, onCheckedChange e closeOnClick (desligado por padrão). O MenuRadioGroup recebe value, defaultValue e onValueChange, e cada MenuRadioItem, um value; um MenuGroupLabel dentro do grupo dá o nome dele. Envolva o MenuSubTrigger e o MenuSubContent num MenuSub. O MenuTrigger recebe render, normalmente <Button /> ou <IconButton aria-label="…" />.
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
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- O gatilho informa aria-haspopup e aria-expanded, e o do submenu também; os itens são menuitem, os de marcar são menuitemcheckbox e os de opção, menuitemradio, os dois com aria-checked.
- Itens desativados continuam na ordem das setas e são anunciados como indisponíveis, então o motivo no texto deles também é lido.
- Depois de uma ação o menu some: anuncie o resultado com role="status" e mantenha o foco no gatilho.
- O popup vai para um portal mas mantém o estilo pelo PortalScope, e o contraste passa no WCAG 2.2 AA nos 13 estilos.