Breadcrumb CSS

O que é

Lista horizontal de links mostrando o caminho até a página atual. O separador entre itens (seta, ponto) é desenhado via CSS na maioria das variantes — só "chevron" precisa de um ícone manual entre os itens.

Como funciona

100% CSS. Nas variantes "/" (padrão), "arrow" e "dot" o separador é um ::after no item — não precisa de markup extra. Em "chevron" o ::after some de propósito, e você mesmo põe um <i class="brc-sep swi-chevron-right"> entre os itens (sem isso, não aparece separador nenhum). O item atual usa a classe .is-cur (sem link).

Exemplos

<nav sw-brc><a class="brc-it" href="/">Início</a><span class="brc-it is-cur">Atual</span></nav>
<nav sw-brc="arrow">…</nav>
<nav sw-brc="dot">…</nav>

<nav sw-brc="chevron">
  <a class="brc-it" href="/">Início</a>
  <i class="brc-sep swi-chevron-right"></i>
  <a class="brc-it" href="/blog">Blog</a>
  <i class="brc-sep swi-chevron-right"></i>
  <span class="brc-it is-cur" aria-current="page">Artigo</span>
</nav>
<!-- sem o <i class="brc-sep">, "chevron" não mostra separador nenhum -->

<nav sw-brc="pill">cada item vira cápsula</nav>
<nav sw-brc="bar lg">trilha com moldura, tamanho grande</nav>

Atributos

Nenhum.

Variantes