Intro
O Breadcrumb é um componente de navegação hierárquica que indica a localização atual do usuário dentro da estrutura do site ou sistema. Ele permite compreender o contexto da página e retornar a níveis anteriores da arquitetura da informação.
É classificado como:
- Componente de Navegação Secundária
- Elemento de orientação estrutural
- Reforço de arquitetura informacional
O Breadcrumb não substitui o menu principal; ele complementa a navegação oferecendo contexto e caminho percorrido.
Anatomia Visual
Estrutura Base
- Container
- Bloco horizontal
- Pode estar integrado ao header da página
- Item de Navegação
- Link clicável (exceto último item)
- Representa um nível da hierarquia
- Separador
- Símbolo visual entre níveis
- Exemplo:
>ou chevron
- Item Atual
- Último elemento da trilha
- Não clicável
- Representa a página ativa
- Ícones Opcionais
- Ícone Home
- Ícone de voltar (contextual)
Estados
Para itens clicáveis:
- Default
- Hover
- Focus
- Active
Para item atual:
- Estado estático (sem hover)
- Pode possuir estilo diferenciado (peso tipográfico ou cor neutra)
Características
Comportamento
- Todos os níveis anteriores ao atual são clicáveis
- O último item representa o estado atual e não deve ser link
- Deve refletir fielmente a arquitetura da informação
- Não deve representar ações, apenas navegação
Uso
Quando usar
- Portais institucionais
- Sistemas administrativos
- Estruturas com múltiplos níveis hierárquicos
- Páginas internas com profundidade superior a dois níveis
Quando não usar
- Landing pages isoladas
- Fluxos lineares (ex: checkout)
- Interfaces com navegação plana
- Aplicações onde a hierarquia não é relevante
O que fazer / O que não fazer
✅ Faça
- Use nomenclaturas claras e consistentes
- Garanta alinhamento com o título da página
- Utilize separadores padronizados
- Mantenha hierarquia fiel à estrutura real
- Trate corretamente estados de foco
❌ Não faça
- Não inclua ações (ex: “Editar”, “Salvar”) no breadcrumb
- Não transforme o último item em link
- Não use breadcrumbs para navegação lateral
- Não utilize rótulos diferentes dos títulos reais das páginas
- Não ultrapasse profundidade excessiva sem truncamento
O Breadcrumb é um componente essencial para:
- Orientação contextual
- Redução de desorientação
- Apoio à navegação reversa
- Reforço da arquitetura da informação
Ele melhora previsibilidade e usabilidade, especialmente em ambientes institucionais complexos. Seu uso deve respeitar semântica, clareza hierárquica e consistência estrutural.