Breadcrumb CSS

O que é

É a linha pequena no topo da página: "Início / Blog / Como escolher um tênis". Cada parte é um link para voltar um nível; a última é a página atual, sem link. Você escreve um <nav sw-brc> com os itens (classe brc-it) e marca o atual com is-cur. Palavras dentro do sw-brc trocam o separador e o estilo.

É só CSS — não precisa de JavaScript. O separador ("/", "›" ou "•") é desenhado sozinho entre os itens: você não escreve. Os links saem na cor primária do site e o item atual em negrito, na cor do texto. Funciona no tema claro e no escuro.

Quando usar

• Loja virtual: Início / Categoria / Produto.
• Blog: Início / Blog / Categoria / Artigo.
• Painel administrativo: Painel / Clientes / Editar cliente — logo abaixo do topo.
• Ajuda o Google a entender a estrutura do site (veja a receita com os dados estruturados).

Comece aqui

1. 1

   Coloque o SW Core no <head>. O breadcrumb é só CSS.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Escreva os itens dentro do <nav sw-brc>, um ao lado do outro. O último leva is-cur e não é link.

   <nav sw-brc aria-label="Você está aqui">
     <a class="brc-it" href="/">Início</a>
     <a class="brc-it" href="/roupas">Roupas</a>
     <span class="brc-it is-cur" aria-current="page">Camiseta</span>
   </nav>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<nav sw-brc aria-label="Você está aqui">
  <a class="brc-it" href="/">Início</a>
  <a class="brc-it" href="/roupas">Roupas</a>
  <span class="brc-it is-cur" aria-current="page">Camiseta</span>
</nav>

<!-- a mesma trilha em formato que o Google entende (aparece no resultado da busca) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Início", "item": "https://minhaloja.com.br/" },
    { "@type": "ListItem", "position": 2, "name": "Roupas", "item": "https://minhaloja.com.br/roupas" },
    { "@type": "ListItem", "position": 3, "name": "Camiseta" }
  ]
}
</script>

<ol sw-brc="arrow" aria-label="Você está aqui">
  <li class="brc-it"><a href="/">Início</a></li>
  <li class="brc-it"><a href="/blog">Blog</a></li>
  <li class="brc-it is-cur" aria-current="page">Como escolher um tênis</li>
</ol>
<!-- a classe brc-it vai no <li>, não no <a> -->

<h1>Editar cliente</h1>
<nav sw-brc="bar sm" aria-label="Você está aqui">
  <a class="brc-it" href="/painel">Painel</a>
  <a class="brc-it" href="/painel/clientes">Clientes</a>
  <span class="brc-it is-cur" aria-current="page">Ana Nunes</span>
</nav>

Precisa de quê

• swcore.min.css.
• swcore.compl.min.css — só no modo chevron ou com ícones.

Cuidados — erros comuns

• Os itens brc-it têm que ser irmãos, um ao lado do outro. Se cada link estiver dentro de uma <li> e a classe ficar no <a>, o separador some — ponha a classe na <li> (veja a receita).
• No modo chevron, sem o <i class="brc-sep …"> entre os itens não aparece separador nenhum.
• Não escreva o "/" à mão nos outros modos: ele já é desenhado e ficaria duplicado.
• O item atual não é link: use <span> (ou <li>) com is-cur e aria-current="page".
• Dê um nome ao <nav> com aria-label ("Você está aqui"), para o leitor de tela não confundir com o menu principal.

O que ele não faz

• Trilha comprida quebra em mais de uma linha; não encurta os itens do meio sozinha ("…").
• Não monta a trilha sozinho a partir do endereço da página: você escreve os itens.