La parola breadcrumb significa, letteralmente, "bricciola di pane" ed è utilizzata nel web-design per indicare un particolare tipo di menu solitamente posizionato nelle immediate vicinanze del contenuto della pagina. Il menu breadcrumbs è utilizzato per indicare chiaramente il percorso gerarchico per raggiungere una data pagina all’interno di un sito web partendo dalla sua home-page ed attraversando le eventuali pagine intermedie.
Menu breadcrumb: un esempio pratico
Facciamo un esempio pratico: supponiamo di gestire un sito di musica e di dover scrivere una biografia di Vasco Rossi. All’interno di questa pagina sarebbe opportuno inserire (generalmente nei pressi del contenuto principale) un menu con una serie di link che indicano il percorso dalla home-page del sito fino alla pagina corrente. Ad esempio:
Home > Musica > Rock > Artisti > Vasco Rossi
Dove ogni parola è, ovviamente, un link.
In questo modo si facilità la navigazione degli utenti ed il lavoro degli spider dei motori di ricerca. L’utilizzo dei menu breadcrumb è consigliatissimo, pertanto, sia per l’usabilità del sito che per una sua corretta indicizzazione (in merito a quest’ultimo aspetto suggerisco di leggere questa lezione della nostra guida SEO).
Modellare l’aspetto di un menu breadcrumb
Da un punto di vista visivo, un menu breadcrumb non è altro che un elenco di link testuali posti in linea, uno accanto all’altro dove a sinistra si trova la home-page del sito ed a seguire i vari livelli (dal più superficiale al più profondo) che è necessario attraversare per giungere a destinazione.
Solitamente i link sono separati tra loro da dei simboli di vario tipo, ad esempio delle semplici slash (/). Personalmente preferisco utilizzare dei caratteri – ad esempio: > o » – o delle icone – come delle frecce – che esprimano la direzione del passaggio dalla home-page sino alla pagina corrente.