Breadcrumb: quando servono a un sito e come progettarle

I breadcrumb sono una breve sequenza di link, di solito in alto nella pagina, che mostra dove si trova la pagina nella struttura del sito web, ad esempio Home > Scarpe > Scarpe da running, e permette a chi visita di risalire di un livello con un clic. Servono quando il sito ha più di due livelli di pagine, come un negozio online, un ampio sito di servizi o una knowledge base; a un sito piccolo e con pochi livelli di solito non servono.

Ultimo aggiornamento: 31 ottobre 2026.

Questa guida spiega i tipi di breadcrumb, quando aiutano e quando ingombrano, come progettarle per desktop e smartphone, come renderle accessibili, come aiutano i motori di ricerca e gli errori da evitare. È pensata per responsabili marketing, product owner e designer che preparano un nuovo sito o un restyling.

In Odduel, un’agenzia creativa e tecnologica con sede a Barcellona e a São Paulo, il nostro servizio di design UX/UI progetta la navigazione di siti, negozi e app. Sul nostro sito ogni articolo e ogni caso studio riporta un percorso di breadcrumb nei dati della pagina, e ogni articolo ha un modo visibile per tornare all’elenco da cui si è arrivati; i consigli qui sotto nascono da questo lavoro e valgono per qualsiasi sito.

In breve: usa le breadcrumb quando il sito ha tre o più livelli e le persone arrivano in profondità dalla ricerca. Mostra il percorso nella struttura, non la cronologia del visitatore; tienilo breve, in caratteri piccoli in alto; rendi ogni livello un link tranne la pagina corrente; marcalo come area di navigazione per gli screen reader e con dati strutturati per i motori di ricerca. Su smartphone mostra il livello superiore o un percorso abbreviato invece di una lunga riga che va a capo.

Cosa sono le breadcrumb?

Le breadcrumb sono un aiuto secondario alla navigazione. Non sostituiscono il menu principale; lo completano rispondendo a due domande di chi arriva su una pagina: dove sono, e come raggiungo la sezione più ampia? Il nome viene dalla scia di briciole della fiaba, ma a differenza di quella scia, delle buone breadcrumb mostrano la struttura del sito e non il percorso fatto per caso dal visitatore.

Un percorso di breadcrumb tipico sta sopra il titolo della pagina, usa testo piccolo, separa i livelli con un simbolo come > o / e termina con la pagina corrente, che non è un link.

Quali tipi di breadcrumb esistono?

La tabella confronta i tre tipi più comuni.

Tipo	Cosa mostrano	Esempio	Ideale per	A cosa fare attenzione
Di posizione	Dove si trova la pagina nella struttura del sito	Home > Servizi > Branding	La maggior parte dei siti, siti di servizi, knowledge base	Pagine presenti in più sezioni
Di attributo	Gli attributi o i filtri che definiscono la pagina	Home > Scarpe > Donna > Taglia 38	Negozi con filtri e navigazione a faccette	Percorsi lunghi e indirizzi duplicati
Di cronologia	Le pagine appena viste dal visitatore	Torna ai risultati	Risultati di ricerca ed elenchi filtrati	Doppione del tasto Indietro del browser

La maggior parte dei siti dovrebbe usare breadcrumb di posizione. Quelle di attributo aiutano nei negozi, purché le combinazioni di filtri non creino indirizzi infiniti da scansionare. I link di cronologia, come «Torna ai risultati», sono utili su una scheda prodotto raggiunta da una ricerca, ma sono uno strumento diverso dalle breadcrumb.

Quando un sito ha bisogno delle breadcrumb?

Le breadcrumb si guadagnano il loro posto quando la struttura è abbastanza profonda da far perdere l’orientamento a un visitatore.

• Negozi online con categorie e sottocategorie, dove spesso si arriva a una scheda prodotto direttamente dalla ricerca.
• Siti di servizi con molti servizi raggruppati per aree.
• Knowledge base, documentazione e centri assistenza con argomenti annidati.
• Blog e magazine organizzati per categorie, dove le breadcrumb collegano un articolo alla sua sezione.
• Grandi siti aziendali o pubblici con più livelli di pagine.

Servono poco su siti piccoli e piatti con poche pagine, sui siti di una sola pagina e sulle landing page costruite attorno a un’unica azione, dove un percorso di link può distrarre dall’obiettivo. Per capire come la navigazione si inserisce nel processo di design, leggi la nostra guida al design UX/UI.

Come progettare i breadcrumb?

Delle buone breadcrumb si trovano facilmente quando servono e si ignorano facilmente quando no.

• Mettile in alto, sopra il titolo della pagina e sotto la navigazione principale, nello stesso punto in ogni pagina.
• Tienile piccole e discrete, più piccole del testo, perché non competano con il titolo.
• Rendi ogni livello un link tranne l’ultimo. La pagina corrente appare come testo, così il visitatore capisce dove si trova.
• Usa separatori chiari, come >, / o una piccola freccia, con spazio sufficiente intorno.
• Usa i nomi reali delle pagine, abbreviati se serve, perché il percorso corrisponda al menu e ai titoli.
• Parti da Home, o dalla sezione principale se il logo porta già alla home e lo spazio è poco.
• Un solo percorso per pagina. Se un prodotto appartiene a più categorie, scegline una principale per il percorso.

Prova il percorso con persone che non conoscono il sito. Chiedi loro di trovare un prodotto o un articolo, poi di raggiungere la sezione a cui appartiene, e osserva se usano le breadcrumb, il menu o il tasto Indietro. Se nessuno nota il percorso, forse è troppo discreto; se i livelli vengono fraintesi, vanno rivisti i nomi delle pagine o la struttura, non le breadcrumb.

Come funzionano i breadcrumb su mobile?

I percorsi lunghi vanno a capo male sugli schermi piccoli e spingono giù il titolo. Soluzioni comuni:

• Mostrare solo il livello superiore, come unico link «torna alla sezione» con una freccia.
• Accorciare la parte centrale dei percorsi lunghi, mantenendo il primo e l’ultimo livello.
• Far scorrere il percorso in orizzontale su una sola riga, se deve restare completo.

Qualunque soluzione tu scelga, mantieni aree di tocco abbastanza grandi e prova su smartphone reali.

Come dovrebbero usare i breadcrumb i negozi online?

È nei negozi che le breadcrumb contano di più, perché la scheda prodotto è spesso la prima pagina vista. Chi arriva su un solo paio di scarpe da running da una ricerca ha bisogno di vedere subito il resto della gamma, e un percorso come Home > Scarpe > Scarpe da running lo permette con un tocco.

• Scegli una categoria principale per ogni prodotto, così il percorso resta uguale ovunque il prodotto compaia.
• Tieni i filtri fuori dal percorso a meno che la pagina filtrata non sia una vera categoria indicizzabile con contenuti propri.
• Affianca al percorso un link «torna ai risultati» quando si arriva da una ricerca o da un elenco filtrato, per tornare esattamente al punto di prima.

La nostra guida alle funzionalità di un sito e-commerce presenta gli altri elementi di navigazione che servono a un negozio dal primo giorno.

Come si rendono accessibili le breadcrumb?

Le breadcrumb devono essere utilizzabili con uno screen reader o con la tastiera quanto con il mouse. Il pattern breadcrumb del W3C descrive il markup abituale:

• Un’area di navigazione (un elemento nav) con un’etichetta come «Breadcrumb», perché chi usa uno screen reader la trovi e possa saltarla.
• Un elenco ordinato di link, che trasmette l’ordine dei livelli.
• La pagina corrente indicata con l’attributo aria-current impostato su page, perché venga annunciata come posizione attuale.
• Separatori disegnati con CSS invece che digitati come caratteri, perché non vengano letti a ogni livello.
• Contrasto sufficiente e focus visibile per il testo piccolo e i link.

La nostra guida all’accessibilità dei siti web tratta i requisiti più ampi validi in Europa.

Le breadcrumb aiutano la SEO?

Le breadcrumb aiutano i motori di ricerca in due modi. I loro link sono link interni che indicano ai crawler come le pagine si collegano alle sezioni. E i dati strutturati che descrivono il percorso, con il tipo BreadcrumbList, permettono ai motori di capire la gerarchia e, in alcuni risultati, di mostrare il percorso al posto di un semplice indirizzo; Google ne descrive il formato nella sua documentazione sui dati strutturati per le breadcrumb.

Perché funzioni, il percorso deve riflettere una struttura chiara e corrispondere agli indirizzi. Il nostro articolo sugli URL SEO friendly spiega come indirizzi e struttura si sostengono a vicenda. Sui siti multilingue ogni versione deve avere nomi e indirizzi propri nel percorso.

Quali sono gli errori più comuni nei breadcrumb?

• Usare le breadcrumb come navigazione principale. Completano il menu; non lo sostituiscono.
• Mostrare la cronologia invece della posizione. Ripete il tasto Indietro e confonde chi arriva dalla ricerca.
• Mettere un link sulla pagina corrente. Un link alla pagina in cui sei è un vicolo cieco.
• Percorsi che non corrispondono al menu. Nomi diversi per la stessa sezione nel menu e nelle breadcrumb.
• Breadcrumb su siti piatti. Un percorso Home > Pagina non aggiunge nulla.
• Troppo piccole o poco contrastate. Breadcrumb difficili da leggere o da toccare su smartphone.
• Nessun dato strutturato, o dati che non corrispondono al percorso visibile.

Se stai rivedendo un sito esistente, la nostra checklist per l’audit UX include controlli di navigazione oltre alle breadcrumb.

Le domande più comuni

Le breadcrumb sono un piccolo dettaglio che ripaga su qualsiasi sito con profondità: orientano i visitatori, aiutano l’accessibilità e fanno leggere meglio la struttura ai motori di ricerca. Scopri come il nostro servizio di design UX/UI progetta la navigazione, oppure raccontaci il tuo progetto e vedremo come le persone si orientano sul tuo sito.