O que é?

Breadcrumbs ajudam o usuário a identificar onde ele se encontra em páginas web que possuam hierarquia organizada. Devem ser usados em sites com muitos níveis de conteúdo.

Aplicação

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Report</a></li>
    <li class="is-active"><a href="#" aria-current="page">Report details</a></li>
  </ul>
</nav>

Boas práticas

• O primeiro link dos breadcrumbs deve ser sempre Início.
• Use na parte superior da página
• Abaixo do menu e acima do título (se houver) e do conteúdo.
• Exiba o local atual na estrutura hierárquica do site. Não deve exibir o histórico da sessão, exceto se o caminho percorrido pelo usuário for igual a estrutura do site até a página atual.
• Não exiba nos breadcrumbs os rótulos de menus que não possuem página. Mostre apenas os links de páginas pais, avós, etc.
• A página atual deve aparecer nos breadcrumbs sem link. Você pode ler mais sobre isso na documentação do Bulma.
• Não use em sites com apenas 1 ou 2 ní­veis de navegação.

Acessibilidade

Inclua o meta atributo aria-label="breadcrumbs" no bloco principal do componente e o atributo aria-current="page" no item da lista que indica o caminho atual da página.