Padrão Oficial de Breadcrumbs do OLA
Breadcrumbs são o “mapa do lugar”: orientam o leitor, indicam o tipo de página e ajudam a governança do OLA.
M3 · Princípios
M2 · Convenções
M1 · Componentes
M0 · Aplicação nas páginas
Regra de ouro: 2–5 níveis
Último item não é link
Ícone no item atual
Sempre após o header
1) Regras do padrão
- Sempre visível: posicione logo após o header e antes do Hero/conteúdo.
- Curto e estável: ideal 2 a 5 níveis (evite > 6).
- Separador único: use sempre
› (ou escolha um único separador para todo o site).
- Item atual não é link: último item com classe
.current.
- Ícone só no item atual (padrão): reduz ruído e reforça o tipo da página.
- Acessível: use
<nav aria-label="breadcrumb"> e texto legível (não só ícone).
2) Taxonomia oficial de ícones
| Tipo de página | Ícone | Uso típico |
|---|
| Índice / Hub | 🧭 | mapas, páginas-hub, visão geral |
| Livro-Conceito | 📘 | modelo conceitual do OLA |
| Instância OLA | 🧩 | página concreta (conceito, capítulo, artefato) |
| Trilha | 🗺️ | caminhos de aprendizagem |
| OA | 🧠 | objeto de aprendizagem (prático) |
| Arquitetura / Padrões | 🧱 | design system, convenções, componentes |
| Lab / Experimento | 🧪 | ensaios e protótipos |
| Evidências | ✅ | registros, comprovações, checks |
Regra prática: 🧩 é o “selo de instância” do OLA.
4) CSS mínimo recomendado
Copie/cole este bloco em páginas que ainda não tenham o estilo padrão.
.breadcrumb{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
margin:10px 0 0;
padding:8px 10px;
border:1px solid var(--border);
border-radius:14px;
background: rgba(255,255,255,.02);
font-size: 13px;
}
.breadcrumb a{
color: var(--text);
text-decoration:none;
font-weight:800;
}
.breadcrumb a:hover{ text-decoration: underline; }
.breadcrumb span{ color: var(--muted); }
.breadcrumb .current{ color: var(--text); font-weight:950; }
5) Checklist de validação
- Está logo após o header e antes do conteúdo?
- Tem 2–5 níveis?
- O último item não é link?
- O ícone do item atual corresponde ao tipo da página?
- Os links levam para hubs reais (ou planejados)?
Mini changelog: v1 (2026-01-25) — cria o padrão oficial, taxonomia de ícones e templates canônicos.