Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

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

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.

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