Breadcrumbs: quando um site precisa deles e como desenhá-los

A navegação breadcrumb é o pequeno trilho de links, normalmente no topo da página, que mostra onde essa página se situa na estrutura do website, por exemplo Início > Sapatos > Sapatilhas de corrida, e permite ao visitante subir um nível com um só clique. Um website precisa dela quando tem mais de dois níveis de páginas, como uma loja online, um website de serviços extenso ou uma base de conhecimento; um website pequeno e de estrutura plana normalmente não precisa.

Última atualização: 31 de outubro de 2026.

Este guia explica os tipos de breadcrumbs, quando ajudam e quando atrapalham, como desenhá-los para computador e telemóvel, como torná-los acessíveis, como ajudam os motores de pesquisa e os erros a evitar. Destina-se a responsáveis de marketing, product owners e designers que preparam um novo site ou um redesign.

Na Odduel, uma agência criativa e tecnológica em Barcelona e São Paulo, o nosso serviço de design UX/UI desenha a navegação de sites, lojas e apps. No nosso próprio site, cada artigo e cada estudo de caso inclui um trilho de breadcrumbs nos dados da página, e cada artigo tem uma forma visível de voltar à lista de onde se veio; os conselhos abaixo vêm desse trabalho e aplicam-se a qualquer site.

Em resumo: use breadcrumbs quando o site tem três ou mais níveis e as pessoas chegam a páginas profundas a partir da pesquisa. Mostre o percurso na estrutura, não o histórico do visitante; mantenha-o curto, em letra pequena no topo; faça de cada nível uma ligação exceto a página atual; marque-o como zona de navegação para leitores de ecrã e com dados estruturados para os motores de pesquisa. No telemóvel, mostre o nível superior ou um trilho encurtado em vez de uma linha longa que quebra.

O que são breadcrumbs?

Os breadcrumbs são uma ajuda de navegação secundária. Não substituem o menu principal; complementam-no ao responder a duas perguntas de quem chega a uma página: onde estou e como chego à secção mais ampla? O nome vem do rasto de migalhas do conto, mas, ao contrário desse rasto, um bom trilho mostra a estrutura do site e não o caminho que o visitante seguiu por acaso.

Um trilho de breadcrumbs típico fica acima do título da página, usa texto pequeno, separa os níveis com um símbolo como > ou / e termina na página atual, que não é uma ligação.

Que tipos de breadcrumbs existem?

A tabela compara os três tipos mais comuns.

Tipo	O que mostra	Exemplo	Ideal para	A ter em atenção
De localização	Onde a página se situa na estrutura do site	Início > Serviços > Branding	A maioria dos sites, sites de serviços, bases de conhecimento	Páginas que estão em várias secções
De atributos	Os atributos ou filtros que definem a página	Início > Sapatilhas > Mulher > Tamanho 38	Lojas com filtros e navegação por facetas	Trilhos longos e endereços duplicados
De histórico	As páginas que o visitante acabou de ver	Voltar aos resultados	Resultados de pesquisa e listas filtradas	Duplicar o botão Retroceder do navegador

A maioria dos sites deve usar breadcrumbs de localização. Os de atributos ajudam em lojas, desde que as combinações de filtros não criem endereços sem fim para rastrear. As ligações de histórico, como «Voltar aos resultados», são úteis numa ficha de produto a que se chega por pesquisa, mas são uma ferramenta diferente de um trilho de breadcrumbs.

Quando é que um site precisa de breadcrumbs?

Os breadcrumbs merecem o seu lugar quando a estrutura é profunda o bastante para um visitante se desorientar.

• Lojas online com categorias e subcategorias, onde as pessoas chegam muitas vezes a uma página de produto a partir da pesquisa.
• Sites de serviços com muitos serviços agrupados por áreas.
• Bases de conhecimento, documentação e centros de ajuda com temas encadeados.
• Blogs e revistas organizados por categorias, onde os breadcrumbs ligam um artigo à sua secção.
• Grandes sites empresariais ou públicos com vários níveis de páginas.

Acrescentam pouco em sites pequenos e planos com poucas páginas, em sites de uma só página e em landing pages construídas à volta de uma única ação, onde um trilho de ligações pode desviar a atenção do objetivo. Para ver como a navegação se encaixa no processo de design, consulte o nosso guia de design UX/UI.

Como desenhar breadcrumbs?

Bons breadcrumbs encontram-se facilmente quando são precisos e ignoram-se facilmente quando não.

• Coloque-os no topo, acima do título da página e abaixo da navegação principal, no mesmo lugar em todas as páginas.
• Mantenha-os pequenos e discretos, menores do que o texto corrido, para não competirem com o título.
• Faça de cada nível uma ligação, exceto o último. A página atual aparece como texto, para o visitante perceber onde está.
• Use separadores claros, como >, / ou uma pequena seta, com espaço suficiente à volta.
• Use os nomes reais das páginas, encurtados se for preciso, para que o trilho corresponda ao menu e aos títulos.
• Comece por Início, ou pela secção principal se o logótipo já leva à página inicial e o espaço é pouco.
• Um só percurso por página. Se um produto pertence a várias categorias, escolha uma principal para o trilho.

Teste o trilho com pessoas que não conhecem o site. Peça-lhes que encontrem um produto ou artigo e que depois cheguem à secção a que pertence, e observe se usam os breadcrumbs, o menu ou o botão Retroceder. Se ninguém repara no trilho, talvez esteja demasiado discreto; se os níveis são mal interpretados, o que precisa de revisão são os nomes das páginas ou a estrutura, não os breadcrumbs.

Como funcionam os breadcrumbs no telemóvel?

Os trilhos longos quebram mal em ecrãs pequenos e empurram o título para baixo. Soluções comuns:

• Mostrar só o nível superior, como uma única ligação «voltar à secção» com uma seta.
• Encurtar o meio dos trilhos longos, mantendo o primeiro e o último nível.
• Deixar o trilho deslizar na horizontal numa só linha, se tiver de ficar completo.

Seja qual for a escolha, mantenha áreas de toque grandes o suficiente e teste em telemóveis reais.

Como devem as lojas online usar breadcrumbs?

É nas lojas que os breadcrumbs mais importam, porque a ficha de produto é muitas vezes a primeira página vista. Quem chega a um único par de sapatilhas de corrida a partir de uma pesquisa precisa de ver depressa o resto da gama, e um trilho como Início > Sapatilhas > Sapatilhas de corrida faz isso com um toque.

• Escolha uma categoria principal para cada produto, para que o trilho seja igual onde quer que o produto apareça.
• Deixe os filtros fora do trilho, a menos que a página filtrada seja uma categoria real e indexável, com conteúdo próprio.
• Junte ao trilho uma ligação «voltar aos resultados» quando os visitantes chegam de uma pesquisa ou lista filtrada, para regressarem exatamente onde estavam.

O nosso guia de funcionalidades de uma loja online trata os restantes elementos de navegação de que uma loja precisa desde o primeiro dia.

Como se tornam os breadcrumbs acessíveis?

Os breadcrumbs devem ser tão utilizáveis com um leitor de ecrã ou teclado como com o rato. O padrão de breadcrumbs do W3C descreve a marcação habitual:

• Uma zona de navegação (um elemento nav) com uma etiqueta como «Breadcrumb», para que os utilizadores de leitores de ecrã a encontrem e possam saltá-la.
• Uma lista ordenada de ligações, que transmite a ordem dos níveis.
• A página atual assinalada com o atributo aria-current com o valor page, para ser anunciada como a localização atual.
• Separadores desenhados com CSS em vez de escritos como caracteres, para não serem lidos em cada nível.
• Contraste suficiente e foco visível no texto pequeno e nas ligações.

O nosso guia de acessibilidade de sites cobre os requisitos mais amplos que se aplicam na Europa.

Os breadcrumbs ajudam o SEO?

Os breadcrumbs ajudam os motores de pesquisa de duas formas. As suas ligações são ligações internas que indicam aos rastreadores como as páginas se relacionam com as secções. E os dados estruturados que descrevem o trilho, com o tipo BreadcrumbList, permitem aos motores de pesquisa compreender a hierarquia e, em alguns resultados, mostrar o percurso em vez de um simples endereço; a Google descreve o formato na sua documentação sobre dados estruturados de breadcrumbs.

Para isto funcionar, o trilho deve refletir uma estrutura clara e corresponder aos endereços. O nosso artigo sobre URLs amigos do SEO explica como endereços e estrutura se apoiam. Em sites multilingues, cada versão deve ter os seus próprios nomes e endereços no trilho.

Quais são os erros mais comuns nos breadcrumbs?

• Usar os breadcrumbs como navegação principal. Complementam o menu; não o substituem.
• Mostrar o histórico em vez da localização. Repete o botão Retroceder e confunde quem chega pela pesquisa.
• Pôr uma ligação na página atual. Uma ligação para a página onde se está é um beco sem saída.
• Trilhos que não correspondem ao menu. Nomes diferentes para a mesma secção no menu e nos breadcrumbs.
• Breadcrumbs em sites planos. Um trilho Início > Página não acrescenta nada.
• Demasiado pequenos ou com pouco contraste. Breadcrumbs difíceis de ler ou de tocar no telemóvel.
• Sem dados estruturados, ou com dados que não correspondem ao trilho visível.

Se está a rever um site existente, a nossa checklist de auditoria UX inclui verificações de navegação além dos breadcrumbs.

Perguntas frequentes

Os breadcrumbs são um pequeno pormenor que compensa em qualquer site com profundidade: orientam os visitantes, apoiam a acessibilidade e ajudam os motores de pesquisa a ler a estrutura. Veja como o nosso serviço de design UX/UI desenha a navegação, ou fale-nos do seu projeto e analisamos como as pessoas se orientam no seu site.