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 o padrão de trilha de navegação do ARIA Authoring Practices Guide .