HTML.it - Reference Bootstrap

Guida Boostrap 3 - Reference

Indice dei contenuti

Navigazione breadcrumb

Il componente Breadcrumb serve a evidenziare la posizione corrente nella mappa di navigazione del sito.

Markup HTML di base

Come tutti i componenti di navigazione di Bootstrap, anche Breadcumbs si basa su una lista. Può essere ordinata (ol) o non ordinata (ul). Per implementare il componente si aggiunge la classe .breadcrumb al tag ol o ul. La classe .active designa la posizione corrente.

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Servizi</a></li>
  <li class="active">Offerte</li>
</ul>

Regole CSS per il componente Breadcrumb

Per personalizzare l'aspetto del componente Breadcrumb si può intervenire su queste regole:

/* Contenitore */
.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* Padding, colore e simbolo del separatore */
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #cccccc;
  content: "/\00a0";
}

/* Colore dell'item attivo */
.breadcrumb > .active {
  color: #999999;
}