Navigation menu
Menu de navegação com os links principais de um site, num `<nav>`, com painéis opcionais que abrem a partir de um gatilho, como um mega menu de produtos. Ele leva a páginas; para comandos, use um Menu ou uma Menubar.
Instalação
Configure o Camaleo uma vez (Instalação) e importe as partes que precisar. Os painéis renderizam num portal e mantêm o estilo, o modo e a cor da página em volta.
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from "@camaleo/react";Anatomia
O NavigationMenu renderiza o <nav>; dê a ele um aria-label. Cada NavigationMenuItem guarda um NavigationMenuLink ou um NavigationMenuTrigger com o seu NavigationMenuContent, o painel que abre embaixo dele.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima, e todo painel começa fechado.
Só links
Quando todo item do topo é uma página, você não precisa de painéis: uma barra de NavigationMenuLink é uma lista simples de links de verdade, cada um uma parada do Tab.
Painel de produtos
Abra Produtos. Uma descrição curta embaixo de cada nome mostra qual produto serve antes do clique, e o ícone ajuda a achar de novo da próxima vez.
Card em destaque no painel
Destaque uma página do momento, como o webinar da semana que vem, ao lado dos links de sempre. Faça do card inteiro um link só, para ser uma parada só do Tab.
Página atual
Clique nos links. O active coloca aria-current="page", que o leitor de tela anuncia como "página atual" e o estilo sublinha, para não depender só da cor.
Atraso ao passar o mouse
Passe o mouse pela barra. O delay e o closeDelay evitam que os painéis pisquem quando a pessoa só está passando por cima a caminho da página.
Vertical
Para as seções de uma área, como as configurações, empilhe a lista na lateral. O orientation="vertical" troca as setas para ↑ e ↓.
Regiões com nome
Quem usa leitor de tela pula entre regiões pelo nome. Com dois navs na página, "Principal" e "Rodapé" separam um do outro; dois navs sem nome são lidos os dois como "navegação".
A barra quebra a linha em vez de se recolher: ela não tem um layout próprio para celular. Abaixo de uns 640px, troque por um botão de menu que abre um Drawer com os mesmos links.
Em contexto
O navigation menu fica no cabeçalho de um site ou de uma seção. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Configure notas recorrentes
Atualizado em 03/10/2026 · 4 min de leitura
Boas práticas
"Notas fiscais", "Clientes", "Relatórios": cada rótulo é uma página, então a pessoa sabe onde vai parar e pode abrir numa nova aba.
"Exportar CSV" e "Arquivar" não levam a lugar nenhum. Coloque ações num Menu ou numa Menubar, onde elas são anunciadas como comandos.
Três opções com uma frase cada são mais rápidas de escolher do que uma lista de nomes para adivinhar.
Doze links sem grupos nem descrições viram um mapa do site. Divida por assunto, ou leve a uma página que liste todos.
Props
value do item cujo painel está aberto, para controlar pelo código. null fecha.eventDetails.Estas são as props do NavigationMenu. O NavigationMenuLink aceita active (coloca aria-current="page") e closeOnClick. O NavigationMenuTrigger aceita hideIcon, e o NavigationMenuContent aceita align e sideOffset. Dê um value ao NavigationMenuItem quando controlar o menu pelo código.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio nav.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- A raiz é um <nav>: dê um aria-label para ela aparecer pelo nome entre as regiões da página.
- Os gatilhos são botões com aria-expanded; os links são <a href> de verdade, então o clique do meio e o "abrir em nova aba" funcionam.
- Marque a página em que a pessoa está com active, que coloca aria-current="page".
- Passar o mouse abre o painel depois do delay (50 ms por padrão), e sair fecha depois do closeDelay. Os painéis também abrem pelo teclado, então nada depende do mouse.