Migalhas de pão

Indique a localização da página atual dentro de uma hierarquia de navegação que adiciona automaticamente separadores via CSS.

Exemplo

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Alterando o separador

Os separadores são adicionados automaticamente no CSS por meio de ::beforee content. Eles podem ser alterados alterando $breadcrumb-divider. A função quote é necessária para gerar as aspas em torno de uma string, então se você quiser >como separador, você pode usar isso:

$breadcrumb-divider: quote(">");

Também é possível usar um ícone SVG incorporado em base64 :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

O separador pode ser removido definindo $breadcrumb-dividerpara none:

$breadcrumb-divider: none;

Acessibilidade

Como as trilhas de navegação fornecem uma navegação, é uma boa ideia adicionar um rótulo significativo, como aria-label="breadcrumb"para descrever o tipo de navegação fornecido no <nav>elemento, bem como aplicar um aria-current="page"ao último item do conjunto para indicar que ele representa a página atual.

Para obter mais informações, consulte as Práticas de autoria WAI-ARIA para o padrão breadcrumb .