Ir ao conteúdo
SEED engenhariaDesign System

Componentes

36. Breadcrumb

estávelseed-componentes.md v1.43 · §36seção 38 de 9836-breadcrumb-estavel-v0-41-bc1-bc5-bloco-5-5c.md · MD5 8fa1b838

Título completo no canon: Breadcrumb — estável (v0.41) · BC1–BC5 · Bloco 5/5C · lote autônomo 1

Base (3 rodadas, 2026-08-06): R1 — NN/g "Breadcrumbs: 11 Design Guidelines" (localização na hierarquia, NUNCA histórico da sessão; caminho único em poli-hierarquia; começa em Início; perto do título; ≥3 níveis) + NN/g 2007 + GOV.UK Breadcrumbs (nav rotulado + ol; antes do <main>; não usar em estrutura rasa nem jornada linear/transação) + National Archives DS (colapso mobile: primeiro+último com expansão) + UMN/UMich (atual sem link). R2 — shadcn/Bootstrap (aria-current="page" convergente). R3 — APG breadcrumb pattern (nav nomeado + ol + separador via CSS decorativo; issue #3047 sobre o último item — resolvida à la USWDS) + USWDS (14 testes a11y; separadores ocultos de SR; último item <span> com aria-current) + W3C DS + MDN pt-BR (vocabulário "trilha de navegação"/"migalha de pão").

# Decisão Porquê Descartado
BC1 Localização, nunca histórico: trilha mostra a posição na hierarquia (caminho único). Usar com ≥3 níveis; NÃO usar em estrutura rasa, jornada linear (stepper §38) ou dentro de transação NN/g (path-based fica longo e não serve a quem chega de link externo); GOV.UK Trilha de sessão; breadcrumb em wizard
BC2 Anatomia: nav com aria-label="Trilha de navegação (breadcrumb)" + ol; separador decorativo (aria-hidden); último item = página atual, <span> SEM link, aria-current="page"; começa em "Início" (sem duplicar com o menu global) APG+USWDS (resolução do #3047: atual sem link — link para si mesmo é ruído); NN/g (Home no começo, sem duplicação) Atual como link (USWDS/UMN contra); separador lido por SR
BC3 Colapso: quando não cabe, mostra primeiro + "…" + último; o "…" é botão nomeado que EXPANDE inline e foca o primeiro nível revelado. Nunca truncar rótulos National Archives DS (padrão oficial); expansão inline evita menu para 2–3 itens Menu dropdown no "…" (peso do §35 para caso trivial); truncar rótulo
BC4 Posição: topo da página de conteúdo, antes do <main>, abaixo do topbar — o skip-link pula a trilha junto GOV.UK (racional do skip-link); NN/g (perto do título) Trilha no rodapé
BC5 Fronteira: o breadcrumb NÃO é navegação primária (o shell F6 é); em página raiz de módulo não aparece (nível <3) NN/g (secundária por definição) Breadcrumb como substituto de menu

Tokens: links via --seed-text-link (par §26); atual text-primary 700; separador text-muted decorativo; "…" com hitbox W4. Nenhum par novo. Os 7 testes: 1 herdados ✓ · 2 atual por peso+sem-sublinhado+aria-current · 3 grayscale ok (peso) · 4 trilha × tabs a 1s (hierarquia × vistas) · 5 um caminho só · 6 posição visível · 7 360px colapsado com alvos 44. (Suite 5C: BC-01–04 ✓; colapso renderizado no gate.)


BancadaSEED DS v2 — Bloco 5 Navegação — preview v0.40c (5A tabs · 5B menu · 5C breadcrumb+paginação · 5D stepper · 5E ⌘K)abrir em página própria ↗
Esc