Quali vantaggi offre la na­vi­ga­zio­ne brea­d­crumb?

La na­vi­ga­zio­ne brea­d­crumb è un elemento im­por­tan­te per guidare gli utenti nei siti web e nelle app. Li aiuta a ri­co­no­sce­re la loro posizione attuale all’interno della struttura della pagina e a tornare ra­pi­da­men­te ai livelli superiori.

Cos’è una na­vi­ga­zio­ne brea­d­crumb?

Chi non ricorda la famosa fiaba dei fratelli Grimm “Hansel e Gretel”? Una sorella e un fratello vengono portati dai genitori, che vogliono liberarsi di loro, in una foresta e, mentre camminano, spargono briciole di pane alle loro spalle per essere sicuri di ritrovare la strada di ritorno verso casa. Le briciole vengono però mangiate dagli uccellini, così i bambini si perdono nel bosco e cadono nelle grinfie di una strega che vuole mangiarli, ma alla fine riescono a fuggire e a trovare la via d’uscita dalla foresta.

Ma cosa c’entra questa fiaba con il web design? È molto semplice: il World Wide Web e i siti web par­ti­co­lar­men­te complessi a volte as­so­mi­glia­no proprio a una grande foresta oscura. Quando navigano su negozi online o scon­fi­na­ti portali web, gli utenti sperduti non de­si­de­ra­no altro che trovare il modo più semplice per tornare alle pagine superiori. La na­vi­ga­zio­ne brea­d­crumb (in italiano: “briciole di pane”) serve proprio a questo.

La na­vi­ga­zio­ne brea­d­crumb co­sti­tui­sce un elemento di na­vi­ga­zio­ne se­con­da­rio, uti­liz­za­to per sup­por­ta­re i menu classici nella parte superiore di un sito web. Da un lato, con l’aiuto di una simile tecnica di na­vi­ga­zio­ne, gli utenti possono sempre vedere in quale punto del sito web si trovano, e dall’altro viene indicato anche quale percorso conduce alle aree so­vraor­di­na­te. Il co­sid­det­to brea­d­crumb trail (in italiano: “sentiero di briciole di pane”) rap­pre­sen­ta le singole stazioni ordinate in sequenza secondo logica e in genere disposte ge­rar­chi­ca­men­te. Gli utenti si spostano dalla pagina iniziale al contenuto specifico at­tra­ver­so le pagine di categoria. Il sentiero di briciole offre col­le­ga­men­ti a tutte queste stazioni. In questo modo gli utenti sono in grado di seguire la struttura del sito web e tornare indietro con un semplice clic.

I tipi di na­vi­ga­zio­ne brea­d­crumb

Le brea­d­crumb sui siti web assolvono quindi la stessa funzione delle briciole nella fiaba, con una cruciale dif­fe­ren­za: non possono essere raccolte dagli uccelli, cosa che nella fiaba rende difficile il ritorno a casa a Hansel e Gretel. La rap­pre­sen­ta­zio­ne di una na­vi­ga­zio­ne brea­d­crumb è variabile: è comune servirsi di simboli, come frecce o il segno maggiore (>), che agiscono come se­pa­ra­to­ri e allo stesso tempo raf­fi­gu­ra­no la gerarchia del sito web. Inoltre, vengono spesso usati anche pulsanti grafici sotto forma di frecce. Il risultato è un sentiero che cor­ri­spon­de ap­pros­si­ma­ti­va­men­te allo schema seguente:

Homepage > Categoria > Posizione attuale

Spesso su pagine par­ti­co­lar­men­te complesse tra la pagina iniziale e la posizione attuale si trovano altre categorie e sot­to­ca­te­go­rie. Una na­vi­ga­zio­ne brea­d­crumb secondo lo schema di cui sopra è anche chiamata location brea­d­crumb (in italiano: “briciole di pane relative alla posizione”), data la pos­si­bi­li­tà di vi­sua­liz­za­re la posizione attuale e il sentiero verso la pagina iniziale. Un’altra variante meno comune è il path brea­d­crumb (“briciole di pane del sentiero”), che si concentra sull’effettivo percorso dei clic invece che sulla posizione attuale ma che può essere presto motivo di con­fu­sio­ne sulle pagine dalla struttura più complessa. Il path brea­d­crumb traccia il com­por­ta­men­to di na­vi­ga­zio­ne dell’utente sul sito, non importa quanto sia ir­re­go­la­re. Questa variante potrebbe pre­sen­tar­si come segue:

Homepage > Categoria 1 > Homepage > Categoria 3 > Categoria 2 > Homepage

Una terza variante sono le brea­d­crumb basate su categorie o attributi, che si trovano spesso nel settore del commercio in rete e so­prat­tut­to nei negozi online. Esse mostrano all’utente la categoria di cui fa parte la pagina su cui si trovano cor­ren­te­men­te e gli attributi a essa assegnati: queste in­for­ma­zio­ni sono de­ter­mi­na­te sulla base di metadati. Ad esempio, i jeans ap­par­ten­go­no alla categoria dei pantaloni, ma possono avere anche gli attributi “blu” e “taglia 42”:

Homepage > Abbigliamento > Donne > Pantaloni > Jeans > Neri > Taglia 42

Na­vi­ga­zio­ne brea­d­crumb e usabilità

Alcune persone po­treb­be­ro chiedersi quale sia realmente l’utilità della na­vi­ga­zio­ne brea­d­crumb, dopo tutto ci sono anche le barre dei menu per la na­vi­ga­zio­ne. Inoltre, tutti i browser co­mu­ne­men­te uti­liz­za­ti sono dotati di pulsanti per lo scor­ri­men­to in avanti e indietro. Questi elementi rendono possibile la na­vi­ga­zio­ne, ma in alcuni casi sono molto in­gom­bran­ti e com­pli­ca­ti.

Una delle regole più im­por­tan­ti per un buon user ex­pe­rien­ce design è: meno clic devono ef­fet­tua­re gli utenti, migliore sarà la loro espe­rien­za d’uso. Questo principio si applica in par­ti­co­la­re alla na­vi­ga­zio­ne: infatti non c’è niente di più fa­sti­dio­so di dover cliccare sulla freccia “Indietro” del browser o di dover spulciare una categoria nella barra dei menu.

Oltre a ciò, grazie alle brea­d­crumb gli utenti sono sempre al corrente di dove si trovano sul sito web: la gerarchia e la struttura della pagina sono de­ci­sa­men­te più chiare con una na­vi­ga­zio­ne brea­d­crumb rispetto a una na­vi­ga­zio­ne con un menu singolo.

Anche nel caso in cui gli utenti giungano alla pagina di de­sti­na­zio­ne tramite un link esterno o interno, per cui senza aver fatto il percorso dalla homepage fino alla posizione attuale, grazie alla na­vi­ga­zio­ne brea­d­crumb ri­co­no­sco­no a occhio il punto esatto in cui si trovano. In più questa tecnica invita gli utenti a rimanere sulla relativa pagina riducendo il rischio che se ne vadano: la categoria so­vraor­di­na­ta è a un solo clic di distanza per cui non è ne­ces­sa­rio inserire una nuova query di ricerca. In questo modo quegli utenti che sono arrivati alla sot­to­pa­gi­na da link esterni o tramite motore di ricerca non si sentono spaesati e hanno un percorso cui fare ri­fe­ri­men­to e grazie al quale potersi orientare meglio.

La na­vi­ga­zio­ne brea­d­crumb da un punto di vista SEO

Ciò che è utile per l’utente è utile anche per il motore di ricerca. Questa massima dell’online marketing vale anche per quanto riguarda la na­vi­ga­zio­ne brea­d­crumb: nel frattempo capita che le brea­d­crumb siano vi­sua­liz­za­te nelle SERP di Google persino al posto di un URL molto lungo e poco chiaro. Solo sui di­spo­si­ti­vi mobili non è più così dal 2025, per mi­glio­ra­re la chiarezza sugli schermi piccoli. Evi­den­te­men­te i motori di ricerca in­ter­pre­ta­no le brea­d­crumb anche come segnale positivo: la loro vi­sua­liz­za­zio­ne mostra all’utente ciò che lo aspetta e in quale categoria finirà, ancora prima di visitare il sito web.

Close

Os­ser­van­do le de­fi­ni­zio­ni delle singole brea­d­crumb, si nota subito il secondo im­por­tan­te vantaggio per l’ot­ti­miz­za­zio­ne sui motori di ricerca: la na­vi­ga­zio­ne brea­d­crumb offre l’op­por­tu­ni­tà perfetta di ag­giun­ge­re keyword rilevanti a link interni del tutto naturali.

Un web design strut­tu­ra­to lo­gi­ca­men­te con brea­d­crumb rende più facile capire la struttura e la rilevanza di un sito web non solo agli utenti ma anche ai crawler dei motori di ricerca. I crawler seguono i link interni e includono le pagine trovate nell’indice del motore di ricerca.

Ideal­men­te questo si traduce in una migliore clas­si­fi­ca­zio­ne del sito. D’altra parte, per le vi­si­ta­tri­ci e i vi­si­ta­to­ri una na­vi­ga­zio­ne migliore assicura una per­ma­nen­za più lunga sulla pagina; la durata della per­ma­nen­za e il tasso di rimbalzo degli utenti sono al­tret­tan­to es­sen­zia­li come fattori di ranking per i motori di ricerca.

Cosa fare e non fare: quando ricorrere alle brea­d­crumb

Una na­vi­ga­zio­ne brea­d­crumb può mi­glio­ra­re l’usabilità e persino il ranking sui motori di ricerca a patto che sia ade­gua­ta­men­te integrata, po­si­zio­na­ta in modo sensato e offra un valore aggiunto. Di seguito ti spie­ghia­mo come com­por­tar­ti nei singoli casi ri­cor­ren­do a esempi.

Le brea­d­crumb devono apportare un valore aggiunto

Sono pochi i casi in cui la na­vi­ga­zio­ne brea­d­crumb è gra­ve­men­te irritante: uno di questi è se non svolge alcuna funzione. I siti web privi di una struttura profonda che sono provvisti solo di una o poche pagine non hanno bisogno di brea­d­crumb. In questo caso la na­vi­ga­zio­ne avviene tramite la barra del menu primario o l’in­te­sta­zio­ne della pagina. Al contrario, la na­vi­ga­zio­ne brea­d­crumb che propone il sito di Adidas ha senso e offre un si­gni­fi­ca­ti­vo valore aggiunto.

Close

Sul negozio online di Adidas la na­vi­ga­zio­ne brea­d­crumb è un’in­te­gra­zio­ne utile: più sono complesse le query di ricerca più è im­por­tan­te che l’utente sia in grado di tornare indietro nella ricerca senza in­con­tra­re dif­fi­col­tà. In questo modo si ga­ran­ti­sce che l’utente sia sempre al corrente su dove si trovi e quali filtri siano attivi al momento.

Le brea­d­crumb devono essere logiche e non devono creare con­fu­sio­ne

I siti web che offrono molte opzioni di na­vi­ga­zio­ne corrono il rischio di con­fon­de­re i loro utenti con troppe opzioni. I doppioni sono as­so­lu­ta­men­te da evitare. Non sempre repetitia iuvant: le brea­d­crumb devono essere poco ap­pa­ri­scen­ti e adattarsi bene alla maggior parte dei progetti. Se invece il loro unico scopo è di ri­pro­por­re la funzione della barra di na­vi­ga­zio­ne primaria, allora perdono la loro utilità.

Al contrario un impiego positivo della tecnica è stato fatto sul sito web della Fel­tri­nel­li dove viene offerto un valore aggiunto e le brea­d­crumb vengono integrate in modo facile e discreto: la na­vi­ga­zio­ne qui è logica, facile da seguire e si adatta per­fet­ta­men­te al design della pagina.

Close

Ci sono però anche soluzioni meno eleganti che con i loro sentieri di brea­d­crumb com­ple­ta­men­te illogici non fanno altro che creare con­fu­sio­ne nell’utente. Ad esempio, questo può avvenire se nel percorso non viene vi­sua­liz­za­ta né la pagina iniziale né una categoria madre, per cui vengono indicate solamente la posizione attuale senza ulteriori in­di­ca­zio­ni. A questo punto nemmeno il link clic­ca­bi­le è utile, in quanto si riferisce alla pagina sulla quale il vi­si­ta­to­re e la vi­si­ta­tri­ce è già presente. L’in­di­ca­zio­ne della posizione offre un valore aggiunto ridotto senza contesto e può ad­di­rit­tu­ra creare con­fu­sio­ne perché contiene sì un col­le­ga­men­to, ma solo alla posizione corrente.

La na­vi­ga­zio­ne brea­d­crumb supporta la na­vi­ga­zio­ne prin­ci­pa­le ma non la rimpiazza

La na­vi­ga­zio­ne a briciole di pane deve essere uti­liz­za­ta solo per sup­por­ta­re e integrare la na­vi­ga­zio­ne prin­ci­pa­le, di con­se­guen­za dovrebbe essere discreta e non prendere molto spazio. In questo modo non distrae l’at­ten­zio­ne dal contenuto reale. Inoltre, non dovrebbe oscurare la na­vi­ga­zio­ne sulla pagina primaria e dovrebbe essere uti­liz­za­ta solo per una na­vi­ga­zio­ne a più livelli e un orien­ta­men­to rapido. Solo in casi ec­ce­zio­na­li una na­vi­ga­zio­ne molto estesa porta a una migliore usabilità, come succede ad esempio per quanto riguarda il sito web di Walmart.

Close

Chi critica le brea­d­crumb sostiene che la scelta di questo tipo di na­vi­ga­zio­ne sia più che altro sintomo di un web design scadente e che esprima quindi quanto sia confusa l’or­ga­niz­za­zio­ne del progetto web. Eppure, sof­fer­man­do­si ad ana­liz­za­re la si­tua­zio­ne, si noterà presto quanto sarebbe scomodo navigare senza brea­d­crumb. La piat­ta­for­ma online presenta annunci in un’ampia gamma di categorie che gli utenti possono sfogliare. La sua struttura va in pro­fon­di­tà, partendo dalla homepage e ra­mi­fi­can­do­si in varie sot­to­ca­te­go­rie. La na­vi­ga­zio­ne brea­d­crumb aiuta gli utenti a orien­tar­si all’interno di questi livelli. Inoltre, velocizza la selezione e permette di saltare ra­pi­da­men­te da una categoria all’altra.

Come im­ple­men­ta­re le brea­d­crumb?

Per creare una na­vi­ga­zio­ne brea­d­crumb, a seconda delle esigenze e del CMS, ci sono diversi modi per rea­liz­zar­la: si tratta comunque di un’azione re­la­ti­va­men­te semplice per la quale è ne­ces­sa­rio ricorrere all’HTML. Suc­ces­si­va­men­te è possibile uti­liz­za­re il CSS per per­so­na­liz­zar­ne l’aspetto. Il seguente esempio di codice mostra come im­ple­men­ta­re le brea­d­crumb con l’aiuto dell’HTML:

<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/index.html">Homepage</a></li>
        <li><a href="/ebene1.html">Primo livello</a></li>
        <li aria-current="page">Sottopunto del primo livello</li>
    </ol>
</nav>

Nell’esempio di codice qui sopra, per una na­vi­ga­zio­ne completa e logica basata sulla posizione non manca altro che la de­fi­ni­zio­ne della posizione corrente. A questo scopo non è ne­ces­sa­rio nessun altro col­le­ga­men­to iper­te­stua­le, dato che si è già a questo punto. È inoltre possibile uti­liz­za­re l’elemento elenco.

L’attributo aria-label è una proprietà della specifica ARIA (Ac­ces­si­ble Rich Internet Ap­pli­ca­tions) e si utilizza per fornire agli screen reader una de­scri­zio­ne ag­giun­ti­va per un elemento, al fine di mi­glio­ra­re l’ac­ces­si­bi­li­tà.

Per ot­ti­miz­za­re le brea­d­crumb per i motori di ricerca si può ricorrere anche a microdati, RFDa o JSON-LD. Se così facendo le brea­d­crumb sono eti­chet­ta­te se­man­ti­ca­men­te nel codice sorgente, i crawler dei motori di ricerca saranno in grado di leggere gli elementi e possono anche essere vi­sua­liz­za­ti come rich snippet nelle SERP.

Oltre all’im­ple­men­ta­zio­ne tramite HTML e CSS, ci sono molte altre pos­si­bi­li­tà per integrare la na­vi­ga­zio­ne a briciole di pane: la variante più semplice è offerta dai CMS, in cui l’im­ple­men­ta­zio­ne dal back end so­li­ta­men­te viene eseguita in modo rapido e con pochi clic. Per quei CMS che non offrono una soluzione già pronta esistono dei plugin appositi. Per mezzo di PHP o Ja­va­Script è anche possibile im­ple­men­ta­re la na­vi­ga­zio­ne brea­d­crumb su siti web dinamici.