Breadcrumbs (trilha de navegação)

A trilha que mostra onde a pessoa está dentro da hierarquia do produto e como voltar pra níveis acima.

Hard

O que é

Breadcrumbs são a trilha de navegação que mostra a posição da pessoa dentro da estrutura do produto, do tipo Início > Roupas > Camisas > Casual. O nome vem do conto das migalhas deixadas pra encontrar o caminho de volta, e a função aqui é exatamente essa.

Em produto, eles ajudam quando a estrutura é profunda, porque a pessoa confirma onde está e pula de volta pra uma categoria mais ampla sem precisar recomeçar do zero. Isso reduz a carga de navegar em sistemas grandes, como os catálogos de e-commerce.

A trilha serve também pra SEO, já que deixa a hierarquia clara pro buscador, e pra acessibilidade, desde que seja codificada com HTML semântico pra orientar quem usa leitor de tela. Mas ela so faz sentido a partir de três níveis, porque em estrutura rasa acaba virando ruído.

Em uma frase

Como o catálogo tem quatro níveis, vamos colocar breadcrumbs pra pessoa não se perder.

A pergunta que ele responde

Como mostro pra pessoa onde ela está num produto cheio de níveis e como subir de volta?

Quando usar

Em produtos com hierarquia de três níveis ou mais, onde a pessoa precisa se localizar e subir de nível.

Como não usar

O erro é colocar trilha em estrutura rasa, porque ali ela não dá contexto nenhum e so ocupa espaço na tela.

Na prática

Pense no catálogo: a pessoa entra em Casual e a trilha mostra Início > Roupas > Camisas > Casual. Um clique em Camisas a leva de volta pra aquele nível sem refazer a busca.

Não confunda com

Vale separar breadcrumbs de menu, já que cada um responde a uma pergunta diferente. O menu mostra pra onde dá pra ir a partir dali, enquanto a trilha mostra por onde a pessoa já passou pra chegar onde está. Um aponta pra frente, o outro mostra o caminho de volta.

D

Em inglês

Breadcrumbs

Pronúncia

bréd-crâms

Também chamado de

trilha, caminho de navegação, migalhas de pão

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre breadcrumbs em navegação