Gli elenchi sono convenienti a causa della loro struttura gerarchica e impostazione flessibile view, quindi, vengono utilizzati non solo per lo scopo previsto, ma anche per creare vari elementi di pagina come breadcrumb, impaginazione, menu, schede, ecc.
I breadcrumb ti aiutano a navigare nel sito e mostrano la posizione della pagina corrente rispetto ad altre sezioni del sito. In questo modo è facile salire di livello e capire in quale sezione ti trovi attualmente. Quindi, per un sito tecnico, la navigazione può essere la seguente (Fig. 1).
Riso. 1. Tipo di pangrattato
L'ultimo testo punta alla pagina corrente e non è un collegamento. Tutti gli elementi sono separati l'uno dall'altro da un simbolo, di solito una freccia (→), una barra (/), un segno di maggiore (>) e simili.
Poiché il design è assegnato agli stili, il codice HTML è molto conciso. Creiamo una lista e le assegniamo la classe breadcrumbs in modo che lo stile non si estenda ad altre liste.
Si noti che non ci sono separatori qui, vengono visualizzati utilizzando la proprietà dello stile del contenuto (esempio 1).
Esempio 1: fare il pangrattato
Per cominciare, reimpostiamo tutti i margini e i rientri dell'elenco e allineiamo gli elementi orizzontalmente attraverso la proprietà display con un valore di inline-block . Rimuove anche i marcatori, quindi non è necessario farlo apposta. Lo pseudo-elemento ::before è necessario per aggiungere un separatore tra gli elementi e controllarne l'aspetto. Il testo viene aggiunto a tutti gli elementi, incluso il primo, che ovviamente non ci serve. Pertanto, lo rimuoviamo con la pseudo-classe :first-child, che applica lo stile al primo elemento
Un gran numero di materiali, come gli articoli del sito, sono spesso suddivisi in pagine separate con 10-15 articoli per pagina, il che porta a una riduzione del carico del sito. Transizione tra pagine separate avviene attraverso la loro numerazione, dove ogni numero funge da collegamento alla pagina corrispondente. È possibile visualizzare tutte le pagine, un certo numero di esse o solo i link alla pagina successiva e precedente. Quale opzione scegliere dipende dal design del sito e dalle tue preferenze. Uno di modi possibili la numerazione è mostrata in fig. 2.
Riso. 2. Impaginazione
Per fare questa numerazione, usiamo di nuovo un semplice elenco, ora con la classe pager, ogni elemento di questo elenco sarà un collegamento alla pagina. Per evidenziare la pagina corrente, aggiungiamo la classe attiva (esempio 2).
Esempio 2: Impaginazione
La linea tra gli elementi viene eseguita tramite la proprietà border-bottom sull'elemento
Le dimensioni di tutti i cerchi sono impostate esattamente, attraverso la larghezza e l'altezza, e quindi ci sono due problemi. Il primo è che il collegamento è molto più piccolo del cerchio stesso e l'utente mancherà; il secondo: il collegamento si trova nella parte superiore del cerchio, ma non al centro. Il primo problema è risolto semplicemente: devi bloccare i collegamenti, quindi occuperanno l'intera larghezza e altezza del cerchio. Allo stesso tempo, i collegamenti rimangono quadrati e vanno leggermente oltre lo sfondo colorato. Ma questo non è visibile e diventa evidente solo quando si passa con il mouse su uno degli angoli del collegamento. L'allineamento del testo viene eseguito utilizzando la proprietà line-height, il cui valore è uguale all'altezza dell'elemento. Questo metodo permette di allineare il testo al centro dell'altezza dell'elemento e ci sarà utile in futuro.
Il menu sul sito è uno dei modi per navigare attraverso di esso. L'opzione più semplice è un insieme di collegamenti orizzontali che sembrano briciole di pane. La differenza è che non ci sono puntatori tra i collegamenti (Fig. 3).
Riso. 3. Menù orizzontale
Per creare un tale menu, applichiamo i principi che abbiamo usato negli esempi precedenti, ma per cambiare, apporteremo modifiche decorative. Il menu ha una leggera sfumatura, sotto c'è una debole ombra e le voci del menu sono separate linea verticale. La linea stessa non è standard ed è composta da strisce grigie e bianche, quindi aggiungeremo separatamente la nostra linea agli elementi
Esempio 3. Menù orizzontale
gradiente in questo esempio viene aggiunto utilizzando la funzione linear-gradient e l'ombra viene aggiunta utilizzando la proprietà box-shadow.
Un tipo di menu più complesso è chiamato menu a discesa. Al passaggio del puntatore sulle voci compare un sottomenù, prima invisibile (Fig. 4); non appena il puntatore si allontana dal testo, il menu si nasconde nuovamente.
Riso. 4. Visualizzazione del menu a discesa
Questo tipo di menu è abbastanza complicato per il layout, quindi analizziamolo più in dettaglio. Innanzitutto, creiamo un elenco nidificato: gli elementi del primo elenco fungono da testo del menu principale, il secondo elenco è all'interno dell'elemento
Ora dobbiamo distinguere lo stile per diversi elementi
/* Azzera il padding e rimuove i marcatori dagli elenchi */ .menu, .menu ul ( list-style: none; margin: 0; padding: 0; ) .menu ( background: linear-gradient(to bottom, #fff, #f1f2f2 ); /* Gradiente */ bordo: 1px solido #999; /* Opzioni bordo */ padding: 0 5px; /* Margini */ carattere: 14px Arial, sans-serif; /* Opzioni carattere */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Menu shadow */ ) .menu > li ( display: inline-block; /* Allinea orizzontalmente */ border-right: 1px solid #fff; /* White riga a destra */ posizione: relativa; /* Posizionamento relativo */ ) .menu a ( text-decoration: none; /* Rimuovi sottolineatura */ colore: #4c4c4c; /* Colore collegamento */ display: block; /* Block links */ ) .menu > li > a ( padding: 10px 15px; /* Margini */ border-right: 1px solid #d8d8d8; /* Linea grigia destra */ position: relative; /* Posizionamento relativo */ z- index : 3; /* Disegna sopra altri elementi */ ) .menu ul ( display: none; /* Nascondi il sottomenu */ )
Nascondiamo il sottomenu attraverso la proprietà display, di conseguenza, il menu dovrebbe apparire come mostrato in Fig. 3. Aggiunti anche valori zero per gli elenchi, questo ci sarà utile quando si aggiungono sottoelementi, inoltre è coinvolto il posizionamento relativo, z-index non funzionerà senza di esso. E ne abbiamo bisogno per la corretta sovrapposizione di alcuni elementi ad altri.
È possibile abilitare temporaneamente la visualizzazione dei sottomenu e personalizzarne l'aspetto.
Menu ul ( position: absolute; /* Posizionamento assoluto */ display: none; /* Nascondi il sottomenu */ width: 200px; /* Larghezza sottomenu */ background: #fff; /* Colore sfondo */ box-shadow: 0 0 10px #666; /* Opzioni ombra */ ) .menu ul a ( padding: 5px 10px; /* Margini */ ) .menu ul a:hover ( background: #008df2; /* Colore sfondo */ color: #fff ; /* Colore del testo */ )
Resta da visualizzare il sottomenu quando si passa il mouse sopra le voci di menu. Per fare questo, usiamo la pseudo-classe :hover, aggiungendola a li.
Menu li:hover ul ( display: block; )
Questo selettore dice che lo stile dovrebbe essere applicato all'elemento.
Successivamente, il nostro menu funzionerà e visualizzerà il sottomenu in cui è disponibile. Ci sono gli ultimi ritocchi decorativi legati alle ombre e alla loro corretta sovrapposizione. Per visualizzare correttamente l'ombra sotto le voci del menu di primo livello, crea uno pseudo-elemento vuoto tramite ::before , imposta un'ombra per esso e mettilo sotto il collegamento (ecco lo z-index per e utile).
Menu > li:hover::before ( content: ""; /* Crea uno pseudo-elemento vuoto */ in alto: 0; a sinistra: 0; a destra: 0; in basso: 0; /* Stessa dimensione della voce di menu */ box- shadow: 0 5px 10px #666; /* Opzioni ombra */ posizione: assoluta; /* Posizionamento assoluto */ )
Il codice finale è mostrato nell'esempio 4.
Esempio 4 - Menù a tendina
Saluti. Bastano le briciole di pane blocco utile su qualsiasi sito perché ti consente di vedere il percorso completo della pagina in cui ti trovi attualmente. E oggi ti dirò come modellare i breadcrumb in css? Non creare, ma organizzare. In generale, ci sono molte opzioni, ne toccherò due.
Il codice html imita il breadcrumb. Lascia che sia così:
In linea di principio, puoi semplicemente posare una parentesi angolare, ma non ci sarà modo di controllare lo spessore della linea. Propongo di farlo diversamente, con l'aiuto delle trasformazioni. Ecco il codice che lo farà:
Cumbs1 a:not(:ultimo figlio):dopo(
contenuto: "";
display: blocco in linea
larghezza: 5px
altezza: 5px;
bordo superiore: 2px nero pieno;
border-right: 2px nero pieno;
trasformare: ruotare (45 gradi);
margine sinistro: 5px
}
.cumbs1 a:hover(
colore arancione;
}
Forse per te saranno selettori complicati, quindi dai un'occhiata a questo articolo. La linea di fondo è questa: usando lo pseudo-elemento (su cos'è e come usare - ) dopo aggiunge il nostro separatore alla fine di ogni collegamento. È formato utilizzando due telai e ruotato di 45 gradi. Aggiungiamo anche un colore arancione ai collegamenti al passaggio del mouse. Qui, in linea di principio, e tutto il design.
In questo caso, il pangrattato sembrerà più interessante, in questo modo:
Per fare questo, abbiamo bisogno di un'immagine e di alcuni stili css:
Cumbs2(
sfondo: arancione;
larghezza massima: 250 px
}
.cumbs2 a(
display: blocco in linea
imbottitura: 7px 0
colore: #000;
}
.cumbs2 a:not(:ultimo figlio)(
background: url(arrow.png) no-repeat 100% 50%;
padding-destra: 33px;
}
codice html Non cito, perché è lo stesso del primo caso. Da dove cominciare qui? Innanzitutto, definiamo colore di sfondo e le dimensioni dell'intero blocco con pangrattato. Successivamente, impostiamo gli stili generali per i collegamenti: tipo di blocco in linea, rientro in alto e in basso e colore.
La fase successiva è la più interessante: utilizzando la non pseudo-classe, selezioniamo tutti i collegamenti nel blocco, tranne l'ultimo, e li impostiamo immagine di sfondo arrow.png , nessuna ripetizione, con la posizione dello sfondo al centro in altezza e all'estremità nella larghezza di un collegamento. I primi due collegamenti richiedono il trattino interno sulla destra solo per posizionare l'immagine lì. Se non ci fosse, l'immagine finirebbe nel testo.
Come funziona la non pseudo-classe, penso che tu abbia già intuito: seleziona tutti gli elementi, ad eccezione di quanto indicato tra parentesi. Se mai, in futuro scriverò un'altra breve nota sul lavoro con la pseudo-classe:not , dove tutto sarà più chiaro. Bene, eccone 2 opzioni semplici disegni breadcrumb che puoi creare da solo.
raccolta gratuita Pangrattato HTML e CSS esempi di codici di navigazione: semplice, reattivo, multilinea, compresso, eccetera. Aggiornamento della collezione di febbraio 2018. 3 nuovi articoli.
CSS semplice.
Sentiti libero di personalizzarlo a modo tuo. Colori, dimensioni, ombre, bordi, ecc. Fatto con Bootstrap.
Gioca con le dimensioni del browser per vedere come si comportano quando non c'è più spazio per loro.
Questo esempio mostra cosa succede quando un utente si avvicina al pulsante Indietro. I breadcrumb si espandono e consentono all'utente di navigare in qualsiasi altro punto del corso con un impatto minimo sullo spazio.
Breadcrumb con proprietà personalizzate CSS come API.
Realizzato da Stas Melnikov
15 giugno 2017
Frecce di breadcrumb CSS multilinea adattive.
Realizzato da Glynn Smith
30 maggio 2017
Demo GIF: pangrattato
Pangrattato HTML e CSS.
Realizzato da Dany Santos
15 luglio 2016
Breadcrumb di Material Design, tracker dei progressi.
Realizzato da Shyam Chen
30 luglio 2015
Un elenco di breadcrumb compresso per mostrare solo il testo di anteprima per tutti tranne la pagina corrente, con il testo completo mostrato al passaggio del mouse/focus.
Realizzato da Sky
4 marzo 2015
Pangrattato reattivo CSS puro.
Realizzato da Oliver Knoblich
2 aprile 2014
Se hai, come pensi, molto materiale, allora si consiglia di abilitare questa funzionalità qui. Lo stile dell'elenco non eviterà il punto nero dell'elenco o un altro stile predefinito. Dal momento che lo ordina in categorie e incondizionatamente moduli, a partire da pagina iniziale ed è tutto presentato con stile. In questo materiale osservi una selezione realizzata nello stesso stile, è in uno stile piatto.
Qui nella forma sono completamente diversi, che qualcuno non avrà nemmeno bisogno di modificare per adattarli al loro design, poiché si adatterà perfettamente ad esso. Ora useremo codice CSS per creare l'ancora del primo elenco e impostare l'ancora dell'ultimo figlio per renderlo predefinito in modo che il tringle non appaia nella prima ancora figlio dell'ancora a sinistra e nell'ultima ancora figlio a destra.
1. In una tonalità giallo chiaro:
2. Tavolozza chiara con toni verdi:
3. Colore lampone
4. Realizzato in una tavolozza blu:
Sarà un semplice elenco diretto con uno sfondo, un riempimento e qualche altro stile. Dopodiché, creerò una struttura triangolare sul lato destro di ogni list anchor usando i CSS, giocando con le proprietà broder.
Come puoi vedere nella demo, quando passiamo con il mouse su un'ancora di elenco sui forzieri impanati, dà un effetto che significherà visitato o presente in questa sezione.
Oppure possiamo immaginare il suo effetto per renderlo attivo come pangrattato attivo. Puoi dire che questi breadcrumb css sono solo breadcrumb perché userò solo css e css3 per creare questi breadcrumb.
Iniziamo l'installazione:
Lo stile dell'elenco non eviterà il punto nero dell'elenco o un altro stile predefinito. Ogni elenco div inline sarà list-inline per renderlo un elenco orizzontale utilizzando css display: list-inline.
#breadcrumb-isanchogives1 (
text-align: centro;
margine superiore: 30px;
}
#breadcrumb-isanchogives1 ul (
stile elenco: nessuno;
display: tabella in linea;
}
#breadcrumb-isanchogives1 ul li (
visualizzazione: in linea;
}
#breadcrumb-isanchogives1 ul li a (
blocco di visualizzazione;
galleggiante: sinistro;
altezza: 50px;
sfondo: #ffd928;
text-align: centro;
imbottitura: 30px 40px 0 80px;
posizione: relativa;
margine: 0 10px 0 0;
dimensione carattere: 20px
decorazione del testo: nessuna;
colore: #fff;
}
#breadcrumb-isanchogives1 ul li a:after (
contenuto: "";
bordo sinistro: 40px solido #ffd928;
z-indice: 1;
#breadcrumb-isanchogives1 ul li a:before (
contenuto: "";
border-top: 40px solido trasparente;
border-bottom: 40px solido trasparente;
}
#breadcrumb-isanchogives1 ul li:first-child a (
}
#breadcrumb-isanchogives1 ul li:first-child a:before (
display: nessuno;
}
#breadcrumb-isanchogives1 ul li:last-child a (
padding-destra: 80px;
}
#breadcrumb-isanchogives1 ul li:last-child a:after (
display: nessuno;
}
#breadcrumb-isanchogives1 ul li a:hover (
sfondo: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum(
sfondo: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a:hover:after (
bordo-sinistra-colore: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:after (
bordo-sinistra-colore: #ff9a2d;
}
#breadcrumb-isanchogives2 (
text-align: centro;
margine superiore: 30px;
}
#breadcrumb-isanchogives2 ul (
stile elenco: nessuno;
display: tabella in linea;
}
#breadcrumb-isanchogives2 ul li (
visualizzazione: in linea;
}
#breadcrumb-isanchogives2 ul li a (
blocco di visualizzazione;
galleggiante: sinistro;
altezza: 50px;
sfondo: #56e9ae;
text-align: centro;
imbottitura: 30px 40px 0 80px;
posizione: relativa;
margine: 0 10px 0 0;
dimensione carattere: 20px
decorazione del testo: nessuna;
colore: #fff;
}
#breadcrumb-isanchogives2 ul li a:after (
contenuto: "";
border-top: 40px solido trasparente;
border-bottom: 40px solido trasparente;
bordo sinistro: 40px solido #56e9ae;
posizione: assoluta; destra: -40px; alto: 0;
z-indice: 1;
#breadcrumb-isanchogives2 ul li a:before (
contenuto: "";
border-top: 40px solido trasparente;
border-bottom: 40px solido trasparente;
bordo sinistro: 40px solido #f2f2f2;
posizione: assoluta; sinistra: 0; superiore: 0;
}
#breadcrumb-isanchogives2 ul li:first-child a (
}
#breadcrumb-isanchogives2 ul li:last-child a (
padding-destra: 80px;
}
#breadcrumb-isanchogives2 ul li a:hover (
sfondo: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum (
sfondo: #49c593;
}
#breadcrumb-isanchogives2 ul li a:hover:after (
bordo-sinistra-colore: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum:after (
bordo-sinistra-colore: #49c593;
}
#breadcrumb-isanchogives3 (
text-align: centro;
margine superiore: 30px;
}
#breadcrumb-isanchogives3 ul (
stile elenco: nessuno;
display: tabella in linea;
}
#breadcrumb-isanchogives3 ul li (
visualizzazione: in linea;
}
#breadcrumb-isanchogives3 ul li a (
blocco di visualizzazione;
galleggiante: sinistro;
altezza: 50px;
sfondo: #ff818b;
text-align: centro;
imbottitura: 30px 40px 0 80px;
posizione: relativa;
margine: 0 10px 0 0;
dimensione carattere: 20px
decorazione del testo: nessuna;
colore: #fff;
}
#breadcrumb-isanchogives3 ul li a:after (
contenuto: "";
altezza: 80px;
larghezza: 40px;
sfondo: #ff818b;
posizione: assoluta; destra: -40px; alto: 0;
z-indice: 1;
#breadcrumb-isanchogives3 ul li a:before (
contenuto: "";
altezza: 80px;
larghezza: 40px;
border-radius:0px 40px 40px 0px;
sfondo:#f2f2f2;
posizione: assoluta; sinistra: 0; superiore: 0;
}
#breadcrumb-isanchogives3 ul li:first-child a (
border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#breadcrumb-isanchogives3 ul li:first-child a:before (
display: nessuno;
}
#breadcrumb-isanchogives3 ul li:last-child a (
padding-destra: 80px;
border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#breadcrumb-isanchogives3 ul li:last-child a:after (
display: nessuno;
}
#breadcrumb-isanchogives3 ul li a:hover (
sfondo: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum (
sfondo: #ea606b;
}
#breadcrumb-isanchogives3 ul li a:hover:after (
sfondo: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum:after (
sfondo: #ea606b;
}
#breadcrumb-isanchogives4 (
text-align: centro;
margine superiore: 30px;
}
#breadcrumb-isanchogives4 ul (
stile elenco: nessuno;
display: tabella in linea;
}
#breadcrumb-isanchogives4 ul li (
visualizzazione: in linea;
}
#breadcrumb-isanchogives4 ul li a (
blocco di visualizzazione;
galleggiante: sinistro;
altezza: 50px;
sfondo: #2b97cc;
text-align: centro;
imbottitura: 30px 40px 0 80px;
posizione: relativa;
margine: 0 10px 0 0;
dimensione carattere: 20px
decorazione del testo: nessuna;
colore: #fff;
}
#breadcrumb-isanchogives4 ul li a:after (
contenuto: "";
altezza: 80px;
larghezza: 40px;
border-radius:0px 40px 40px 0px;
sfondo:#2b97cc;
posizione: assoluta; destra: -40px; alto: 0;
z-indice: 1;
#breadcrumb-isanchogives4 ul li a:before (
contenuto: "";
altezza: 80px;
larghezza: 40px;
sfondo:#f2f2f2;
border-radius:0px 40px 40px 0px;
posizione: assoluta; sinistra: 0; superiore: 0;
}
#breadcrumb-isanchogives4 ul li:first-child a (
border-top-left-radius: 0px; border-bottom-left-radius: 0px;
}
#breadcrumb-isanchogives4 ul li:last-child a (
padding-destra: 80px;
border-top-right-radius: 0px; border-bottom-right-radius: 0px;
}
#breadcrumb-isanchogives4 ul li a:hover (
sfondo: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum (
sfondo: #207ca8;
}
#breadcrumb-isanchogives4 ul li a:hover:after (
sfondo: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum:after (
sfondo: #207ca8;
}
Questi identificatori hanno la stessa struttura interna, separati da stili diversi a seconda del loro identificatore.
Sui siti con molte pagine, i breadcrumb ( navigazione breadcrumb) può aiutare notevolmente i visitatori a navigare struttura gerarchica documenti e indicare la posizione corrente degli utenti sul sito. Dal punto di vista dell'usabilità, i breadcrumb possono ridurre il numero di passaggi che un visitatore compie per raggiungere il livello più alto di una pagina.
Cos'è il pangrattato?
Briciole di pane (Menu di navigazione, "Briciole di pane", Inglese Briciole di pane) è un elemento di navigazione del sito web che rappresenta il percorso attraverso il sito dalla sua "radice" alla pagina corrente in cui si trova l'utente.
Il nome "Breadcrumbs" è un riferimento ironico alla fiaba tedesca "Hansel e Gretel" in cui i bambini, quando venivano portati nel bosco per la seconda volta, non riuscivano a ritrovare la via del ritorno, perché questa volta invece di piccoli sassolini hanno lasciato il pangrattato. , successivamente beccato dagli uccelli della foresta.
Di solito puoi vedere i breadcrumb su siti con molti contenuti posizionati in un ordine gerarchico. Nella sua forma più semplice, il breadcrumb è presentato come collegamenti di testo orizzontali e caratteri separati (> -"maggiore"), che indicano il livello di questa pagina rispetto ad altre pagine.
Usa il pangrattato per siti web di grandi dimensioni e siti web con organizzazione gerarchica delle pagine.
I breadcrumb non devono essere utilizzati per siti di pari livello che non dispongono di alcuna gerarchia o raggruppamento logico.
Un ottimo modo per determinare se un sito trarrebbe vantaggio dall'utilizzo di un breadcrumb è creare una mappa del sito o un diagramma che rappresenti l'architettura di navigazione del sito, quindi analizzare se i breadcrumb rendono più facile per un utente navigare all'interno e tra le categorie.
La navigazione gerarchica dovrebbe essere considerata come funzione aggiuntiva e non dovrebbe sostituire un efficiente menu di navigazione principale. Questo è uno schema di navigazione secondario che consente agli utenti di stabilire dove si trovano e si trovano modo alternativo navigazione del sito.
Ce ne sono tre principalitipo di pangrattato.
Basato sulla posizione
In base alla posizione, i breadcrumb mostrano all'utente dove si trova nella gerarchia del sito.Sono tipicamente utilizzati per strutture di navigazione che hanno più livelli (tipicamente più di due livelli).Nell'esempio seguente (dasitepoint ), ogni collegamento di testo nella pagina a sinistra è di un livello superiore.
Basato sulla proprietà
I breadcrumb basati sulle proprietà riflettono gli attributi di una particolare pagina.
basato sul percorso
Mostrano il percorso dell'utente alla pagina corrente. Questo percorso è dinamico, la stessa pagina può avere indirizzi diversi.
I breadcrumb vengono utilizzati principalmente per fornire agli utenti fondi aggiuntivi navigazione del sito.Sui siti Web multilivello di grandi dimensioni, offrendo la visualizzazione del percorso, è possibile fornire una transizione abbastanza semplice per l'utente a categorie di livello superiore.
Riduce il numero di clic o azioni per tornare a pagine di livello superiore
Invece di utilizzare il pulsante Indietro del browser o la navigazione del sito Web principale, gli utenti possono tornare a categorie superiori con breadcrumb facendo meno clic.
Di solito non intasare lo schermo
Di solito hanno un orientamento orizzontale e quindi non occupano molto spazio sulla pagina.
Ridurre la frequenza di rimbalzo
I breadcrumb possono incoraggiare i nuovi visitatori a navigare nel resto delle pagine del sito web. Ad esempio, l'utente accede alla pagina tramite ricerca Google, vede le categorie pubblicate sopra e potrebbe essere interessato. Questo, a sua volta, riduce la frequenza di rimbalzo del sito.
Le briciole di pane sono facili da usare. Ma prima di implementarli sul sito, è necessario considerare alcuni errori che dovrebbero essere evitati.
Usare il pangrattato quando non è necessario
Un errore comune è usare il pangrattato quando non c'è alcun vantaggio nel farlo.
Nell'esempio sopra, possiamo osservare troppe opzioni di navigazione posizionate abbastanza vicine l'una all'altra: navigazione primaria, breadcrumb e navigazione secondaria.
Utilizzo di breadcrumb come navigazione principale
Come notato in precedenza, il pangrattato dovrebbe essere usato come ulteriore aiuto alla navigazione.
Usare i breadcrumb quando le pagine hanno più categorie
Il pangrattato ha struttura lineare, quindi saranno difficili da usare se le tue pagine non possono essere suddivise in categorie chiare.Decidere se utilizzare i breadcrumb dipende molto da come si imposta il sito della gerarchia.A basso livello di pagina, l'uso dei breadcrumb è inefficiente, impreciso e crea confusione per l'utente.
Quando si progettano catene di navigazione, possono sorgere alcune domande. Per esempio:
Quale carattere deve essere utilizzato per separare i collegamenti?
Il simbolo più comune e più riconoscibile per separare i collegamenti ipertestuali nei breadcrumb è il simbolo maggiore di (>).
È inoltre possibile utilizzare le virgolette per indicare l'angolo destro (") e le barre (/).
La scelta dipende dal sito stesso e dal tipo di catena che stai utilizzando.Ad esempio, se i collegamenti nei breadcrumb non hanno una relazione gerarchica tra loro, l'utilizzo del simbolo "maggiore di >" potrebbe non trasmettere con precisione il loro significato.
Cosa dovrebbero essere?
Non vuoi che i tuoi breadcrumb dominino la pagina.Dovrebbero essere usati come ulteriore aiuto per gli utenti (per comodità), quindi dovrebbero anche essere dimensionati per corrispondere a questo e trasmettere correttamente questa funzione agli utenti - dovrebbero essere più piccoli o meno evidenti rispetto alla navigazione del menu principale.
Una buona regola empirica quando si valuta la distanza percorsa è quellanon dovrebbe essere il primo elemento che attira l'attenzione dell'utente sulla pagina.
Dove dovrebbero trovarsi le briciole di pane?
I breadcrumb vengono generalmente visualizzati nella parte superiore della pagina, sotto il menu di navigazione principale, se viene utilizzato un menu orizzontale.
Di seguito sono riportate le statistiche raccolte nel maggio 2002 sui primi 75 siti di e-commerce.
95% - orizzontale
5% verticale
Ora che abbiamo visto chi, come, quando e perché utilizzare i breadcrumb, diamo un'occhiata ad alcuni esempi di come i breadcrumb vengono utilizzati sui siti web.
L'uso classico del "pangrattato"
Utilizzo di altri simboli
