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.

Visão geral

Os separadores são adicionados automaticamente no CSS por meio de ::beforee content.

<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>

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 .