C14 · Componentes

Breadcrumbs

Trilha de localização para páginas aninhadas. Separador barra (/). Itens anteriores em neutro escuro; atual em peso 600 com cor de acento.

01

Anatomia

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="/drops">Drops</a></li>
    <li aria-hidden="true">/</li>
    <li aria-current="page">#042</li>
  </ol>
</nav>

02

Diretrizes

Faça

Item atual com aria-current='page'.
Texto em caixa alta + tracking 0.1em.
Em mobile, mostre só último ancestral + atual ('… / Drops / #042').

Não faça

Não use breadcrumb se a árvore tem ≤ 2 níveis (Home/Página).
Não inclua o título atual como link.
Não use chevron '>' como separador (a marca usa '/').