Vai al contenuto principale

Bootstrap Italia

Interfacce Web Accessibili per la PA

Sidebar

Sidebar

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

Semplice

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

Con icona

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<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="#">
            <svg class="icon icon-sm icon-primary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg><span>Link lista 1 (selezionato)</span>
          </a>
        </li>
        <li>
          <a class="list-item medium disabled" href="#">
            <svg class="icon icon-sm icon-primary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg><span>Link lista 2 (disabilitato)</span>
          </a>
        </li>
        <li>
          <a class="list-item medium" href="#">
            <svg class="icon icon-sm icon-primary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg><span>Link lista 3</span>
          </a>
        </li>
        <li>
          <a class="list-item medium" href="#">
            <svg class="icon icon-sm icon-primary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg><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 (selezionato)</span></a>
        </li>
        <li><a class="list-item disabled" href="#"><span>Link secondario 3 (disabilitato)</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">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<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 lista 1 (selezionato)</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 (selezionato)</span></a>
        </li>
        <li><a class="list-item disabled" href="#"><span>Link secondario 3 (disabilitato)</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">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

Annidata

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

Header

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<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 medium" href="#collapseOne" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">
          <span class="list-item-title-icon-wrapper">
            <span>Link lista 1</span>
            <svg class="icon icon-sm icon-primary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
          </span>
          </a>
          <ul class="link-sublist collapse show" id="collapseOne">
            <li><a class="list-item active" href="#"><span>Link lista 1.1 (attivo)</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 1.2</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 1.3</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a class="list-item medium" href="#collapseTwo" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo">
            <span class="list-item-title-icon-wrapper">
              <span>Link lista 2</span>
              <svg class="icon icon-sm icon-primary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
            </span>
          </a>
          <ul class="link-sublist collapse" id="collapseTwo">
            <li><a class="list-item" href="#"><span>Link lista 2.1</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 2.2</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 2.3</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a class="list-item medium" href="#collapseThree" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseThree">
            <span class="list-item-title-icon-wrapper">
              <span>Link lista 3</span>
              <svg class="icon icon-sm icon-primary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
            </span>
          </a>
          <ul class="link-sublist collapse" id="collapseThree">
            <li><a class="list-item" href="#"><span>Link lista 3.1</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 3.2</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 3.3</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>Link secondario 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link secondario 2</span></a>
        </li>
        <li><a class="list-item disabled" href="#"><span>Link secondario 3 (disabilitato)</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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<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" href="#collapseFour" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">
            <span class="list-item-title-icon-wrapper">
              <span>Link lista 1</span><svg class="icon icon-sm icon-inverse" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
            </span>
          </a>
          <ul class="link-sublist collapse show" id="collapseFour">
            <li><a class="list-item active" href="#"><span>Link lista 1.1 (selezionato)</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 1.2</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 1.3</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a class="list-item large medium" href="#collapseFive" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo">
          <span class="list-item-title-icon-wrapper">
              <span>Link lista 2</span><svg class="icon icon-sm icon-inverse" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
            </span>
          </a>
          <ul class="link-sublist collapse" id="collapseFive">
            <li><a class="list-item" href="#"><span>Link lista 2.1</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 2.2</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 2.3</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a class="list-item large medium" href="#collapseSix" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseThree">
            <span class="list-item-title-icon-wrapper">
              <span>Link lista 3</span><svg class="icon icon-sm icon-inverse" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
            </span>
          </a>
          <ul class="link-sublist collapse" id="collapseSix">
            <li><a class="list-item" href="#"><span>Link lista 3.1</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 3.2</span></a>
            </li>
            <li><a class="list-item" href="#"><span>Link lista 3.3</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>Link secondario 1</span></a>
        </li>
        <li><a class="list-item active" href="#"><span>Link secondario 2 (selezionato)</span></a>
        </li>
        <li><a class="list-item disabled" href="#"><span>Link secondario 3 (disabilitato)</span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Attivazione tramite codice

Il componente Sidebar utilizza al suo interno il componente Collapse, si rimanda dunque alla sezione attivazione Collapse tramite codice

Properties

Il selettore da utilizzare per le sovrascrittura delle property è .sidebar-wrapper. La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.

Properties statiche

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-sidebar-padding Controls the padding for the sidebar, using spacing tokens. var(--bsi-spacing-m)
--bsi-sidebar-background-color Controls the background color for the sidebar. transparent
--bsi-sidebar-heading-font-size Controls the heading font size for the sidebar, using font tokens. var(--bsi-heading-6-font-size)
--bsi-sidebar-heading-color Controls the heading color for the sidebar, using color tokens. var(--bsi-color-text-secondary)
--bsi-sidebar-link-padding-x Controls the link horizontal padding for the sidebar, using spacing tokens. var(--bsi-spacing-s)
--bsi-sidebar-link-padding-y Controls the link vertical padding for the sidebar, using spacing tokens. var(--bsi-spacing-xs)
--bsi-sidebar-link-sublist-indent Controls the sublist indent for the sidebar, using spacing tokens. var(--bsi-spacing-m)
--bsi-sidebar-link-font-size Controls the link font size for the sidebar, using font tokens. var(--bsi-label-font-size)
--bsi-sidebar-link-line-height Controls the link line height for the sidebar, using font tokens. var(--bsi-body-line-height)
--bsi-sidebar-link-active-line-width Controls the active line width for the sidebar. 4px
--bsi-sidebar-divider-color Controls the divider color for the sidebar, using color tokens. var(--bsi-color-border-subtle)
--bsi-sidebar-link-active-border-color Controls the active border color for the sidebar, using color tokens. var(--bsi-color-border-primary)

Breaking change

  • Rimossi elementi <span> con classe list-item-title-icon-wrapper.
  • Nella variante con una lista di link primaria annidata è stata rimossa la classe .large dagli elementi <a> con classi .list-item .medium.
  • Nelle varianti scure la classe che controlla il colore delle icone bianche ha cambiato nome: .icon-white diventa .icon-inverse.
  • Rimossa le classi .right-icon e .right dai link list item.

Gli elementi di tipo <a> dei collapse necessitano l’aggiunta dell’attributo role="button".