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;