Unito.it

Tema Unito v 3 / 3.1

Sidebar

Barra di navigazione laterale, include liste di link e liste di link innestate.

La sidebar semplice può contenere:

  • Header
  • Lista di link primaria
  • Lista di link secondaria

Per differenziare a livello stilistico i link secondari, è sufficiente aggiungere la classe .linklist-secondary all’elemento <div class="sidebar-linklist-wrapper"> contenente la Lista di link.

Per creare una sidebar con linea separatrice a sinistra è sufficiente aggiungere la classe .it-line-left-side al wrapper più esterno: <div class="sidebar-wrapper it-line-left-side">
Per aggiungere la linea separatrice a destra utilizzare invece la classe classe .it-line-right-side

La Sidebar viene utilizzata in combinazione con la header minimale per ottenere un'interfaccia compatta.
Si veda anche la pagina html di esempio completa di sidebar, header e toggler.

Esempio

<div class="sidebar-wrapper">
  <div class="sidebar-linklist-wrapper">
    <div class="link-list-wrapper">
      <ul class="link-list">
        <li>
          <h3>Header</h3>
        </li>
        <li><a class="list-item medium active" href="#"><span>Link lista 1 (attivo)</span></a>
        </li>
        <li><a class="list-item medium disabled" href="#"><span>Link lista 2 (disabilitato)</span></a>
        </li>
        <li><a class="list-item medium" href="#"><span>Link lista 3</span></a>
        </li>
        <li><a class="list-item medium" href="#"><span>Link lista 4</span></a>
        </li>
      </ul>
    </div>
  </div>
  <div class="sidebar-linklist-wrapper linklist-secondary">
    <div class="link-list-wrapper">
      <ul class="link-list">
        <li><a class="list-item" href="#"><span>Link secondario 1</span></a>
        </li>
        <li><a class="list-item active" href="#"><span>Link secondario 2 (attivo)</span></a>
        </li>
        <li><a class="list-item disabled" href="#"><span>Link secondario 3 (disabilitato)</span></a>
        </li>
      </ul>
    </div>
  </div>
</div>
Torna su