Skip to main content

Bootstrap Italia

Il tema Bootstrap 4 per lo sviluppo di applicazioni web per la PA

Sidebar

Sidebar

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

Basic sidebar

Default

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.

<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 list active </span></a>
        </li>
        <li><a class="list-item medium disabled" href="#"><span>Link list disabled </span></a>
        </li>
        <li><a class="list-item medium" href="#"><span>Link list</span></a>
        </li>
        <li><a class="list-item medium" href="#"><span>Link list</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>Secondary item </span></a>
        </li>
        <li><a class="list-item active" href="#"><span>Secondary item active </span></a>
        </li>
        <li><a class="list-item disabled" href="#"><span>Secondary item disabled </span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Con icona

La sidebar può contenere icone nella sua Lista di link primaria.

<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 left-icon" href="#"><svg class="icon icon-sm left" aria-hidden="true"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-outline"></use></svg><span>Link list active </span></a>
        </li>
        <li><a class="list-item medium disabled left-icon" href="#"><svg class="icon icon-sm left" aria-hidden="true"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-outline"></use></svg><span>Link list disabled </span></a>
        </li>
        <li><a class="list-item medium left-icon" href="#"><svg class="icon icon-sm left" aria-hidden="true"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-outline"></use></svg><span>Link list</span></a>
        </li>
        <li><a class="list-item medium left-icon" href="#"><svg class="icon icon-sm left" aria-hidden="true"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-outline"></use></svg><span>Link list</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>Secondary item </span></a>
        </li>
        <li><a class="list-item active" href="#"><span>Secondary item active </span></a>
        </li>
        <li><a class="list-item" href="#"><span>Secondary item </span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Con linea a destra

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

<div class="sidebar-wrapper it-line-right-side">
  <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 list active </span></a>
        </li>
        <li><a class="list-item medium disabled" href="#"><span>Link list disabled </span></a>
        </li>
        <li><a class="list-item medium" href="#"><span>Link list</span></a>
        </li>
        <li><a class="list-item medium" href="#"><span>Link list</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>Secondary item </span></a>
        </li>
        <li><a class="list-item active" href="#"><span>Secondary item active </span></a>
        </li>
        <li><a class="list-item disabled" href="#"><span>Secondary item disabled </span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Con linea a sinistra

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">

<div class="sidebar-wrapper it-line-left-side">
  <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 list active </span></a>
        </li>
        <li><a class="list-item medium disabled" href="#"><span>Link list disabled </span></a>
        </li>
        <li><a class="list-item medium" href="#"><span>Link list</span></a>
        </li>
        <li><a class="list-item medium" href="#"><span>Link list</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>Secondary item </span></a>
        </li>
        <li><a class="list-item active" href="#"><span>Secondary item active </span></a>
        </li>
        <li><a class="list-item disabled" href="#"><span>Secondary item disabled </span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Annidata

Default

La sidebar può contenere una Lista di link primaria annidata.

Header

<div class="sidebar-wrapper">
  <h3>Header</h3>
  <div class="sidebar-linklist-wrapper">
    <div class="link-list-wrapper">
      <ul class="link-list">
        <li>
          <a class="list-item large medium right-icon active" href="#collapseOne" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne"><span>Link list selected </span><svg class="icon icon-sm icon-primary right" aria-hidden="true"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand"></use></svg></a>
          <ul class="link-sublist collapse show" id="collapseOne">
            <li><a class="list-item active" href="#"><span>Link list 1 active </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
          </ul>
        </li>
        <li>
          <a class="list-item large medium right-icon" href="#collapseTwo" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo"><span>Link list 1 </span><svg class="icon icon-sm icon-primary right" aria-hidden="true"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand"></use></svg></a>
          <ul class="link-sublist collapse" id="collapseTwo">
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
          </ul>
        </li>
        <li>
          <a class="list-item large medium right-icon" href="#collapseThree" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree"><span>Link list 1 </span><svg class="icon icon-sm icon-primary right" aria-hidden="true"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand"></use></svg></a>
          <ul class="link-sublist collapse" id="collapseThree">
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
          </ul>
        </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>Secondary item </span></a>
        </li>
        <li><a class="list-item active" href="#"><span>Secondary item active </span></a>
        </li>
        <li><a class="list-item" href="#"><span>Secondary item </span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Per cambiare il tema della sidebar e renderla scura è sufficiente aggiungere al div <div class="sidebar-wrapper"> la classe .theme-dark.

Header

<div class="sidebar-wrapper theme-dark">
  <h3>Header</h3>
  <div class="sidebar-linklist-wrapper">
    <div class="link-list-wrapper">
      <ul class="link-list">
        <li>
          <a class="list-item large medium right-icon active" href="#collapseFour" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne"><span>Link list selected </span><svg class="icon icon-sm icon-white right" aria-hidden="true"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand"></use></svg></a>
          <ul class="link-sublist collapse show" id="collapseFour">
            <li><a class="list-item active" href="#"><span>Link list 1 active </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
          </ul>
        </li>
        <li>
          <a class="list-item large medium right-icon" href="#collapseFive" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo"><span>Link list 1 </span><svg class="icon icon-sm icon-white right" aria-hidden="true"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand"></use></svg></a>
          <ul class="link-sublist collapse" id="collapseFive">
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
          </ul>
        </li>
        <li>
          <a class="list-item large medium right-icon" href="#collapseSix" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree"><span>Link list 1 </span><svg class="icon icon-sm icon-white right" aria-hidden="true"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand"></use></svg></a>
          <ul class="link-sublist collapse" id="collapseSix">
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link list 1 </span></a>
            </li>
          </ul>
        </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>Secondary item </span></a>
        </li>
        <li><a class="list-item active" href="#"><span>Secondary item active </span></a>
        </li>
        <li><a class="list-item" href="#"><span>Secondary item </span></a>
        </li>
      </ul>
    </div>
  </div>
</div>