Contexto
Breadcrumbs são uma navegação secundária que mostra a posição de uma página dentro da hierarquia do produto ou do site. Eles ajudam a subir para níveis mais amplos, mas não substituem o menu principal nem representam necessariamente o caminho exato que a pessoa percorreu.
Há duas necessidades diferentes: a trilha hierárquica, baseada na arquitetura do conteúdo, e um retorno baseado no histórico, como “Voltar aos resultados”. Em produtos com busca, filtros e entradas vindas de links externos, confundir essas funções pode fazer a pessoa perder contexto.
Use breadcrumbs como apoio de orientação e navegação ascendente quando a arquitetura do produto tiver níveis claros. Priorize páginas internas, conteúdos profundos, catálogos, bases de conhecimento e portais em que a pessoa possa chegar diretamente por busca, link externo ou compartilhamento.
Represente a hierarquia real. Cada nível deve levar a uma página existente e representar uma relação compreensível. Não crie uma trilha apenas para aumentar links ou inserir palavras-chave.
Mostre a posição atual terminando a trilha com o nome da página em que a pessoa está. Os níveis anteriores devem ser links; o item atual normalmente é texto, ou pode ser um link com aria-current="page" quando houver uma razão clara para isso.
Diferencie retorno e hierarquia. Acrescente “Voltar aos resultados” ou uma ação equivalente quando a pessoa precisar recuperar busca, filtros e ordenação anteriores. Não apresente esse retorno como se fosse um nível fixo da arquitetura.
Mantenha rótulos consistentes com os nomes da navegação, dos títulos e das categorias. Prefira rótulos curtos, específicos e reconhecíveis.
Em telas pequenas, preserve a orientação essencial e reduza a densidade por truncamento, agrupamento ou menu de ancestrais. Não esconda todos os níveis sem oferecer uma forma acessível de recuperá-los.
Posicione a trilha com consistência, próxima do início do conteúdo, depois do cabeçalho e antes do título ou da área principal, conforme o layout do produto.
Como regra prática, considere breadcrumbs quando a pessoa precisa entender onde está ou subir um nível. Se ela precisa recuperar exatamente a lista anterior, implemente também uma ação de histórico. Se a estrutura for rasa e evidente, não adicione o componente por hábito.
Base da recomendação
USWDS, GOV.BR e W3C convergem sobre breadcrumbs como navegação estrutural, com região de navegação, lista ordenada, links para ancestrais e identificação da página atual. A Baymard diferencia a trilha hierárquica do retorno baseado no histórico e mostra por que filtros e ordenação podem ser perdidos quando os dois são tratados como a mesma coisa. As orientações são fortes para produtos hierárquicos, mas não justificam o uso em qualquer tela.
Porque isso importa?
Uma pessoa pode chegar a uma página interna sem ter visto a home, o menu ou as categorias anteriores. A trilha fornece um mapa compacto da estrutura e oferece uma rota para ampliar o escopo sem depender do botão Voltar ou de repetir a busca.
O benefício desaparece quando a trilha não corresponde à arquitetura, usa rótulos vagos, fica longa demais no mobile ou aponta para páginas que não preservam o contexto. Em catálogos e buscas, voltar para a categoria não é sempre o mesmo que voltar para os resultados filtrados.
Breadcrumbs têm pouco valor quando a página é rasa, isolada ou parte de um fluxo linear. Nesses casos, o componente pode criar ruído e sugerir uma hierarquia que não existe. A decisão deve partir da estrutura e da tarefa, não da expectativa de que todo site precisa exibir “Home > …”.
Quando usar?
- Sites e produtos com hierarquia de conteúdo profunda.
- Páginas internas acessadas diretamente por busca ou links externos.
- Catálogos, bases de conhecimento e portais extensos.
- Conteúdos em que subir para a categoria pai é uma tarefa frequente.
- Interfaces em que a posição na arquitetura ajuda a interpretar a página.
- Produtos que precisam oferecer navegação secundária compacta.
Quando evitar?
- Home e páginas sem uma página pai relevante.
- Sites rasos em que a posição já é evidente.
- Landing pages isoladas ou campanhas temporárias.
- Fluxos lineares de formulário ou checkout.
- Breadcrumbs usados como substituto do menu principal.
- Trilhas baseadas apenas no caminho casual da sessão.
- Hierarquias inconsistentes ou ainda não definidas.
Recomendações
Faça
- Mostre a hierarquia real.
- Use nomes reconhecíveis.
- Linke os níveis anteriores.
- Identifique a página atual.
- Preserve a trilha no mobile.
- Separe hierarquia de histórico.
- Posicione antes do conteúdo.
- Teste entradas diretas.
Evite
- Usar em toda página.
- Inventar níveis para SEO.
- Substituir o menu principal.
- Confundir com etapas.
- Usar rótulos vagos.
- Apagar filtros ao voltar.
- Esconder a trilha no mobile.
