Breadcrumb
Trilha de navegação que mostra onde a página atual fica na hierarquia do site e leva a cada nível acima dela. É um mapa da estrutura, não um registro de por onde a pessoa passou.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele não tem estado nem efeitos, então também renderiza no servidor; o BreadcrumbLink aceita a prop render para usar o link do seu roteador.
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "@camaleo/react";Anatomia
Um landmark nav em volta de uma lista ordenada. Cada nível é um item; os separadores são itens próprios, escondidos do leitor de tela, e o último item é a página atual.
Exemplos
Todo exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor da marca escolhidos na barra acima.
Tênis de corrida
148 produtosFrete grátis acima de R$ 299
Caminho de categorias
Espelhe a árvore do catálogo, para que quem chegou numa categoria pela busca possa subir um nível e ver as categorias vizinhas.
Permissões
Caminho nas configurações
É fácil se perder em telas de configuração profundas. A trilha termina no título da própria página, que o repete logo abaixo.
Orçamento.xlsx
Editado em 14/03/2026 por Ana RibeiroNíveis do meio recolhidos
Aperte o botão …. Deixe o primeiro nível e os dois últimos à vista e coloque o resto num Menu aberto por um BreadcrumbEllipsis; o nome dele diz quantos níveis esconde.
Aluguel do escritório 2026.pdf
Assinado em 01/02/2026 · 12 páginasCom ícones
Uma casinha sozinha não diz nada ao leitor de tela. Dê nome a um link só de ícone com VisuallyHidden e marque todo ícone com aria-hidden.
Revisão anual do manual da marca e migração de arquivos
Nomes longos
Corte um nome longo na tela com reticências, nunca no texto: o leitor de tela continua lendo o nome inteiro, e o título abaixo mostra ele completo.
checkout.tsx
128 linhas · último commit há 2 diasSeparador de barra
Todo separador traz uma seta e uma barra. Defina --cml-crumb-chevron: none e --cml-crumb-slash: inline para caminhos de arquivo, em que a barra é a convenção.
Com o link do Next.js
render={<NextLink href="…" />} mantém a navegação no cliente e o prefetch, e o link continua com o slot, o estilo e o anel de foco.
No celular
A lista quebra para uma segunda linha em vez de rolar para o lado. Quando ela ocuparia três linhas, recolha os níveis do meio.
Em contexto
Estas são partes inteiras de interface que você pode copiar, no estilo que escolheu.
Tênis de Corrida Pegasus 41
R$ 799,99ou 10x de R$ 80,00 sem juros| Nome | Tamanho |
|---|---|
| Planejamento 4º tri | — |
| Orçamento 2026.xlsxCompartilhado | 248 KB |
| Ata do conselho 14-03.docx | 36 KB |
Dados da nota fiscal
As notas saem todo dia 1º do mês.
Boas práticas
O mesmo pedido fica sempre dentro de Pedidos, não importa como a pessoa chegou até ele.
Para isso existe o botão Voltar. Uma trilha que muda a cada visita não ensina a estrutura.
Reembolsos
O BreadcrumbPage diz "você está aqui" com aria-current="page" e não é um link para si mesmo.
Reembolsos
Parece outro lugar para ir, e seguir o link só recarrega a mesma página.
Props
BreadcrumbItem, BreadcrumbPage e BreadcrumbSeparator aceitam as props do li, do span e do li. O BreadcrumbLink aceita as props de um a, mais render para usar o link do seu roteador. O BreadcrumbEllipsis representa níveis recolhidos: sozinho é uma imagem chamada "Mais páginas"; com render={<button type="button" />}, como gatilho de um menu, é um botão. Passe aria-label para dizer quantos níveis ele esconde.
Styling hooks
Mude o visual sem copiar o componente: use os slots ou defina os tokens num elemento pai, num estilo ou na própria trilha.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* barras em vez de setas no navegador de arquivos */
.files [data-slot="breadcrumb"] {
--cml-crumb-chevron: none;
--cml-crumb-slash: inline;
}Acessibilidade
- É um landmark nav chamado "Breadcrumb". Traduza o nome com aria-label; o leitor de tela mostra ele na lista de landmarks da página.
- Os níveis são uma lista ordenada, então o leitor de tela diz quantos são. A página atual tem aria-current="page" e é texto simples.
- Os separadores têm aria-hidden: o leitor de tela lê os nomes um depois do outro, sem "barra" ou "maior que" no meio.
- Sozinho, o BreadcrumbEllipsis é uma imagem chamada "Mais páginas" (das mensagens); como gatilho de menu é um botão com o mesmo nome, que o aria-label pode trocar.
- Os links têm pelo menos 24px de altura (WCAG 2.5.8). Um link só de ícone precisa de um nome em texto, por exemplo com VisuallyHidden.