Percorso di navigazione

Indica la posizione della pagina corrente all'interno di una gerarchia di navigazione che aggiunge automaticamente i separatori tramite CSS.

Panoramica

I separatori vengono aggiunti automaticamente in CSS tramite ::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>

Accessibilità

Poiché i breadcrumb forniscono una navigazione, è una buona idea aggiungere un'etichetta significativa come aria-label="breadcrumb"per descrivere il tipo di navigazione fornito <nav>nell'elemento, oltre ad applicare un aria-current="page"all'ultimo elemento del set per indicare che rappresenta la pagina corrente.

Per ulteriori informazioni, vedere le pratiche di creazione di WAI-ARIA per il modello breadcrumb .