Fondazione - Breadcrumb di navigazione
Descrizione
Un breadcrumb specifica la posizione corrente di un sito all'interno della gerarchia di navigazione. È utile quando si accede a un numero elevato di pagine di un sito Web. Un breadcrumb in Foundation è semplicemente un elenco non ordinato con una classe di .breadcrumb . Per informazioni dettagliate consultare questo capitolo .
Riferimento SASS
Variabili
È possibile modificare gli stili dei componenti utilizzando le seguenti variabili SASS elencate nella tabella.
| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $breadcrumbs-margin Attorno al contenitore del breadcrumb viene impostato il margine. |
Numero | 0 0 $ margine globale 0 |
| 2 | $breadcrumbs-item-font-size Imposta la dimensione del carattere per l'elemento breadcrumb. |
Numero | rem-calc (11) |
| 3 | $breadcrumbs-item-color Imposta il colore per l'elemento breadcrumb. |
Colore | $ colore-primario |
| 4 | $breadcrumbs-item-color-current Imposta il colore per l'elemento breadcrumb corrente. | Colore | $ nero |
| 5 | $breadcrumbs-item-color-disabled L'elemento breadcrumb è disabilitato. |
Numero | $ grigio medio |
| 6 | $breadcrumbs-item-margin Imposta il margine tra gli elementi breadcrumb. |
Numero | 0.75rem |
| 7 | $breadcrumbs-item-uppercase Rende l'elemento breadcrumb in maiuscolo. |
Booleano | vero |
| 8 | $breadcrumbs-item-slash Include una barra tra gli elementi breadcrumb. |
Booleano | vero |
Mixin
Puoi usare i mixin per costruire la struttura della classe CSS per i tuoi componenti come elencato nella tabella -
contenitore per pangrattato
Include gli stili per il contenitore breadcrumb con lo stile per l'elemento <li> <a> presente al suo interno.
@include breadcrumbs-container;
