Percorso di navigazione

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

Esempio

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

Cambiare il separatore

I separatori vengono aggiunti automaticamente in CSS tramite ::beforee content. Possono essere cambiati cambiando $breadcrumb-divider. La funzione quote è necessaria per generare le virgolette attorno a una stringa, quindi se vuoi >come separatore, puoi usare questo:

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

È anche possibile utilizzare un'icona SVG incorporata in base64 :

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

Il separatore può essere rimosso impostando $breadcrumb-dividersu none:

$breadcrumb-divider: none;

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, consulta la breadcrumb pattern ARIA Authoring Practices Guide .