Breadcrumbs
Indica la posizione della pagina corrente all’interno di una gerarchia di navigazione.
Nelle breadcrumbs c’è la possibilità di scegliere il carattere da usare come separatore inserendolo all’interno del tag <span class="separator">
Accessibilità
Per aggiungere un icona all’elemento breadcrumb è sufficiente inserire l’SVG corrispondente prima del tag <a> con la classe dell’icona che si intende visualizzare.
Dato che le breadcrumb forniscono una navigazione, è buona idea aggiungere un’etichetta significativa come aria-label="breadcrumb" per descrivere il tipo di navigazione fornito nell’elemento <nav>, nonché applicare aria-current="page" all’ultimo elemento del set per indicare che rappresenta la pagina corrente.
Per maggiorni informazioni, guarda le linee guida WAI-ARIA per la creazione di breadcrumb.
Esempio - Versione 3.1
ultimo aggiornamento 16/10/24
<nav class="breadcrumb-container_v2" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" title="Lorem Ipsum">Home</a><span class="separator">/</span></li>
<li class="breadcrumb-item"><a href="#" title="Lorem Ipsum">Subsection</a><span class="separator">/</span></li>
<li class="breadcrumb-item active" aria-current="page">Current section</li>
</ol>
</nav>
<nav class="breadcrumb-container_v2" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" title="Lorem Ipsum">Home</a><span class="separator">/</span></li>
<li class="breadcrumb-item"><svg class="icon icon-sm icon-secondary align-top mr-1" aria-hidden="true"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg><a href="#" title="Lorem Ipsum">Subsection</a><span class="separator">/</span></li>
<li class="breadcrumb-item active" aria-current="page"><svg class="icon icon-sm icon-secondary align-top mr-1" aria-hidden="true"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg>Current section</li>
</ol>
</nav>Solo Versione 3
<nav class="breadcrumb-container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" title="Lorem Ipsum">Home</a><span class="separator">></span></li>
<li class="breadcrumb-item"><a href="#" title="Lorem Ipsum">Subsection</a><span class="separator">></span></li>
<li class="breadcrumb-item active" aria-current="page">Current section</li>
</ol>
</nav>
<nav class="breadcrumb-container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><svg class="icon icon-sm icon-secondary align-top mr-1" aria-hidden="true"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg><a href="#" title="Lorem Ipsum">Home</a><span class="separator">></span></li>
<li class="breadcrumb-item"><svg class="icon icon-sm icon-secondary align-top mr-1" aria-hidden="true"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg><a href="#"title="Lorem Ipsum">Subsection</a><span class="separator">></span></li>
<li class="breadcrumb-item active" aria-current="page"><svg class="icon icon-sm icon-secondary align-top mr-1" aria-hidden="true"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg>Current section</li>
</ol>
</nav>