Percorso di navigazione breadcrumb
Indicazione chiara della posizione nel sito.
Quando si usa
Nei siti con molte categorie, sottocategorie e pagine di dettaglio.
Perché si usa
Il breadcrumb aiuta l'utente a orientarsi e a tornare rapidamente ai livelli superiori.
Vantaggi principali
- Orientamento immediato
- Collegamenti interni utili
- Struttura semantica con nav e aria-label
Anteprima del risultato
Il breadcrumb mostra il percorso della pagina e aiuta l'utente a capire dove si trova all'interno del sito.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<nav class="breadcrumb" aria-label="Percorso di navigazione">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/guide/">Guide</a></li>
<li aria-current="page">HTML5</li>
</ol>
</nav>
<style>
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0}
.breadcrumb li+li::before{content:"/";margin-right:7px;color:#6b7d90}
.breadcrumb a{color:#173b6d}
</style>Da personalizzare: Sostituisci i nomi e gli URL dei livelli, mantenendo l'ultima voce come pagina corrente.
Errore da evitare: Non usare il breadcrumb come sostituto del menu principale.