Vai al contenuto principale

Bootstrap Italia

Interfacce Web Accessibili per la PA

Toolbar

Toolbar

Elemento contenitore di link, pulsanti o dropdown.

L’elemento Toolbar è un contenitore di link, pulsanti o dropdown. Consiste in un elenco <ul> con tanti elementi <li> quante sono le voci richieste.

Dimensioni

La Toolbar si adatta automaticamente allo spazio disponibile. È consigliabile utilizzare contenitori di dimensione orizzontale (o verticale, nel caso del Toolbar verticale) ridotta, per evitare che gli elementi si disperdano in uno spazio troppo ampio.

Per ottimizzare lo spazio, è possibile utilizzare le tre dimensioni disponibili: grande, media e piccola. La dimensione predefinita è la grande. Le altre dimensioni dipendono dalla dimensione delle icone e del testo.

Toolbar grande

La versione predefinita dell’elemento è quella con icone grandi e label.

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

<nav class="toolbar">
  <ul>
    <li>
      <a href="#" class="active">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="toolbar-label">Messaggi</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
        <span class="toolbar-label">Immagini</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
        <span class="toolbar-label">Documenti</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
        <span class="toolbar-label">Privacy</span>
      </a>
    </li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="toolbar-label">Preferiti</span>
      </a>
    </li>
  </ul>
</nav>

Toolbar media

Applicando la classe .toolbar-medium si ottiene la dimensione media, con testo di dimensione leggermente inferiore.

In questo caso le label, nascoste visivamente, devono essere contenute in uno <span> con classe .visually-hidden, per rendere disponibile la descrizione agli screen reader.

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

<nav class="toolbar toolbar-medium">
  <ul>
    <li>
      <a href="#" class="active">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="visually-hidden">Messaggi</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
        <span class="visually-hidden">Immagini</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
        <span class="visually-hidden">Documenti</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
        <span class="visually-hidden">Privacy</span>
      </a>
    </li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="visually-hidden">Preferiti</span>
      </a>
    </li>
  </ul>
</nav>

Toolbar piccola

Applicando la classe .toolbar-small si ottiene la dimensione piccola, con testo e icone di dimensione inferiore. Cambia anche il padding interno del componente.

Anche in questo caso le label, nascoste visivamente, devono essere contenute in uno <span> con classe .visually-hidden, per rendere disponibile la descrizione agli screen reader.

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

<nav class="toolbar toolbar-small">
  <ul>
    <li>
      <a href="#" class="active">
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="visually-hidden">Messaggi</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
        <span class="visually-hidden">Immagini</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
        <span class="visually-hidden">Documenti</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
        <span class="visually-hidden">Privacy</span>
      </a>
    </li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="visually-hidden">Preferiti</span>
      </a>
    </li>
  </ul>
</nav>

Stato degli elementi

Al tag <a> dell’elemento attivo va applicata la classe .active.

Gli elementi disabilitati avranno invece una classe .disabled con ulteriori accorgimenti relativi all’accessibilità a seconda della tipologia:

  • link, tag <a>: aggiungere la proprietà HTML disabled al tag.
  • dropdown button, tag <button>: aggiungere l’attributo aria-disabled="true".

Divisori

Per aggiungere degli elementi divisori fra gli elementi utilizzare dei tag <li> con classe .toolbar-divider, aggiungendo il ruolo separatore role="separator" per indicarne la presenza agli screen reader e aria-orientation="vertical" per indicarne l’orientamento.

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

<nav class="toolbar">
  <ul>
    <li>
      <a href="#" class="active">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="toolbar-label">Messaggi</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
        <span class="toolbar-label">Immagini</span>
      </a>
    </li>
    <li class="toolbar-divider" role="separator" aria-orientation="vertical"></li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
        <span class="toolbar-label">Documenti</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
        <span class="toolbar-label">Privacy</span>
      </a>
    </li>
    <li class="toolbar-divider" role="separator" aria-orientation="vertical"></li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="toolbar-label">Preferiti</span>
      </a>
    </li>
  </ul>
</nav>

Toolbar con Badge

I Badge possono essere utilizzati per indicare contenuti non letti o alert di vario tipo.

Grande con Badge

Nella dimensione grande i Badge possono contenere dei numeri. Il numero dei contenuti non letti o nuovi va indicato anche all’interno della label in uno <span> con classe .visually-hidden riservato agli screen reader.

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

<nav class="toolbar">
  <ul>
    <li>
      <a href="#" class="active">
        <div class="badge-wrapper"><span class="toolbar-badge">2</span></div>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="toolbar-label">Messaggi<span class="visually-hidden">Ci sono 2 nuovi messaggi da leggere</span></span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="badge-wrapper"><span class="toolbar-badge">42</span></div>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
        <span class="toolbar-label">Immagini<span class="visually-hidden">Ci sono 42 nuove immagini da visualizzare</span></span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
        <span class="toolbar-label">Documenti</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
        <span class="toolbar-label">Privacy</span>
      </a>
    </li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="toolbar-label">Preferiti</span>
      </a>
    </li>
  </ul>
</nav>

Media con Badge

Nella versione media i Badge non contengono numeri ma possono essere usati come alert generici. Il numero dei contenuti non letti o nuovi va indicato all’interno della label con classe .visually-hidden riservata agli screen reader.

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

<nav class="toolbar toolbar-medium">
  <ul>
    <li>
      <a href="#" class="active">
        <span class="visually-hidden">Messaggi</span>
        <div class="badge-wrapper">
          <span class="toolbar-badge"></span>
          <span class="visually-hidden">Ci sono 2 nuovi messaggi da leggere</span>
        </div>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="visually-hidden">Immagini</span>
        <div class="badge-wrapper">
          <span class="toolbar-badge"></span>
          <span class="visually-hidden">Ci sono 42 nuove immagini da visualizzare</span>
        </div>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="visually-hidden">Documenti</span>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="visually-hidden">Privacy</span>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
      </a>
    </li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <span class="visually-hidden">Preferiti</span>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
      </a>
    </li>
  </ul>
</nav>

Piccola con Badge

Nella dimensione piccola i Badge non contengono numeri ma possono essere usati come alert generici. Il numero dei contenuti non letti o nuovi va indicato all’interno della label con classe .visually-hidden riservata agli screen reader.

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

<nav class="toolbar toolbar-small">
  <ul>
    <li>
      <a href="#" class="active">
        <span class="visually-hidden">Messaggi</span>
        <div class="badge-wrapper">
          <span class="toolbar-badge"></span>
          <span class="visually-hidden">Ci sono 2 nuovi messaggi da leggere</span>
        </div>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="visually-hidden">Immagini</span>
        <div class="badge-wrapper">
          <span class="toolbar-badge"></span>
          <span class="visually-hidden">Ci sono 42 nuove immagini da visualizzare</span>
        </div>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="visually-hidden">Documenti</span>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="visually-hidden">Privacy</span>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="visually-hidden">Preferiti</span>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
      </a>
    </li>
  </ul>
</nav>

Toolbar con Dropdown

All’interno della Toolbar è possibile implementare dei pulsanti dropdown con relativo sottomenù. Per gestire correttamente la larghezza e l’allineamento dei contenuti del pulsante, è necessario aggiungere un contenitore <div> con classe .d-flex align-items-center, come mostrato negli esempi che seguono.

Grande con Dropdown

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

<nav class="toolbar">
  <ul>
    <li>
      <div class="dropdown">
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <div class="badge-wrapper"><span class="toolbar-badge">2</span></div>
              <svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
              <span class="toolbar-label">Messaggi<span class="visually-hidden">Ci sono 2 nuovi messaggi da leggere</span></span>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <div class="badge-wrapper"><span class="toolbar-badge">42</span></div>
              <svg class="icon"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
              <span class="toolbar-label">Immagini<span class="visually-hidden">Ci sono 42 nuove immagini da visualizzare</span></span>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
              <span class="toolbar-label">Documenti</span>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-disabled="true" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
              <span class="toolbar-label">Privacy</span>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <button class="btn btn-dropdown dropdown-toggle disabled" type="button" id="dropdownMenuButton5-med" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-disabled="true" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
              <span class="toolbar-label">Preferiti</span>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton5-med">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>

Media con Dropdown

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

<nav class="toolbar toolbar-medium">
  <ul>
    <li>
      <div class="dropdown">
        <button class="btn btn-dropdown dropdown-toggle active" type="button" id="dropdownMenuButton-med" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <span class="visually-hidden">Messaggi</span>
          <div class="d-flex align-items-center">
            <div>
              <div class="badge-wrapper"><span class="toolbar-badge"></span></div>
              <svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
              <span class="visually-hidden">Ci sono 2 nuovi messaggi da leggere</span>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-med">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <span class="visually-hidden">Immagini</span>
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton2-med" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <div class="badge-wrapper"><span class="toolbar-badge"></span></div>
              <svg class="icon"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
              <span class="visually-hidden">Ci sono 42 nuove immagini da visualizzare</span>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2-med">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <span class="visually-hidden">Documenti</span>
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton3-med" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3-med">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <span class="visually-hidden">Privacy</span>
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton4-med" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
            </div>  
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton4-med">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <span class="visually-hidden">Preferiti</span>
        <button class="btn btn-dropdown dropdown-toggle disabled" type="button" id="dropdownMenuButton5-med" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-disabled="true" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton5-med">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>

Piccola con Dropdown

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

<nav class="toolbar toolbar-small">
  <ul>
    <li>
      <div class="dropdown">
        <span class="visually-hidden">Messaggi</span>
        <button class="btn btn-dropdown dropdown-toggle active" type="button" id="dropdownMenuButton-sml" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <span class="visually-hidden">Messaggi</span>
          <div class="d-flex align-items-center">
            <div>
              <div class="badge-wrapper"><span class="toolbar-badge"></span></div>
              <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
              <span class="visually-hidden">Ci sono 2 nuovi messaggi da leggere</span>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-sml">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <span class="visually-hidden">Immagini</span>
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton2-sml" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <div class="badge-wrapper"><span class="toolbar-badge"></span></div>
              <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
              <span class="visually-hidden">Ci sono 42 nuove immagini da visualizzare</span>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2-sml">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <span class="visually-hidden">Documenti</span>
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton3-sml" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3-sml">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <span class="visually-hidden">Privacy</span>
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton4-sml" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
            </div>  
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton4-sml">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="dropdown">
        <span class="visually-hidden">preferiti</span>
        <button class="btn btn-dropdown dropdown-toggle disabled" type="button" id="dropdownMenuButton5-sml" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-disabled="true" title="Azione">
          <div class="d-flex align-items-center">
            <div>
              <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
            </div>
            <svg class="icon icon-xs icon-primary icon-expand" aria-hidden="true">
              <use href="/dist/svg/sprites.svg#it-expand" xlink:href="/dist/svg/sprites.svg#it-expand"></use>
            </svg>
          </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton5-sml">
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li><a class="dropdown-item list-item" href="#"><span>Azione 1</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 2</span></a></li>
              <li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>

Toolbar verticale

Applicando una classe aggiuntiva .toolbar-vertical alla Toolbar gli elementi vengono visualizzati in colonna.

Grande verticale

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

<nav class="toolbar toolbar-vertical">
  <ul>
    <li>
      <a href="#" class="active">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="toolbar-label">Messaggi</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
        <span class="toolbar-label">Immagini</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
        <span class="toolbar-label">Documenti</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
        <span class="toolbar-label">Privacy</span>
      </a>
    </li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="toolbar-label">Preferiti</span>
      </a>
    </li>
  </ul>
</nav>

Media verticale

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

<nav class="toolbar toolbar-medium toolbar-vertical">
  <ul>
    <li>
      <a href="#" class="active">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="visually-hidden">Messaggi</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
        <span class="visually-hidden">Immagini</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
        <span class="visually-hidden">Documenti</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
        <span class="visually-hidden">Privacy</span>
      </a>
    </li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="visually-hidden">Preferiti</span>
      </a>
    </li>
  </ul>
</nav>

Piccola verticale

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

<nav class="toolbar toolbar-small toolbar-vertical">
  <ul>
    <li>
      <a href="#" class="active">
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="visually-hidden">Messaggi</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-camera"></use></svg>
        <span class="visually-hidden">Immagini</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-file"></use></svg>
        <span class="visually-hidden">Documenti</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-locked"></use></svg>
        <span class="visually-hidden">Privacy</span>
      </a>
    </li>
    <li>
      <a href="#" class="disabled" disabled aria-disabled="true">
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="visually-hidden">Preferiti</span>
      </a>
    </li>
  </ul>
</nav>

Attivazione tramite codice

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

Properties

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

Properties statiche

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-toolbar-bg Controls the toolbar list background color, using color tokens. var(--bsi-color-background-inverse)
--bsi-toolbar-divider-color Controls the toolbar divider color, using color tokens. var(--bsi-color-border-subtle)
--bsi-toolbar-link-color Controls the toolbar link color, using color tokens. var(--bsi-color-text-secondary)
--bsi-toolbar-icon-color Controls the toolbar icon color, using color tokens. var(--bsi-icon-secondary)
--bsi-toolbar-dropdown-padding-x Controls the toolbar dropdown padding x, using spacing tokens. var(--bsi-spacing-xxs)
--bsi-toolbar-dropdown-caret-color Controls the toolbar dropdown caret color, using color tokens. var(--bsi-icon-secondary)
--bsi-toolbar-dropdown-caret-size Controls the toolbar dropdown caret size, using spacing tokens. var(--bsi-spacing-3xs)
--bsi-toolbar-dropdown-shadow Controls the toolbar dropdown shadow, using elevation tokens. var(--bsi-elevation-low)
--bsi-toolbar-icon-font-size Controls the toolbar icon font size, using color tokens. var(--bsi-icon-size-l)
--bsi-toolbar-item-gap Controls the toolbar item gap, using spacing tokens. var(--bsi-spacing-xs)
--bsi-toolbar-more-icon-font-size Controls the toolbar more icon font size, using typography tokens. var(--bsi-label-font-size-xs)
--bsi-toolbar-badge-border-color Controls the toolbar badge border color, using color tokens. var(--bsi-color-background-inverse)
--bsi-toolbar-badge-background-color Controls the toolbar badge background color, using color tokens. var(--bsi-color-background-primary)
--bsi-toolbar-badge-border-radius Controls the toolbar badge border radius, using radius tokens. var(--bsi-radius-circle)
--bsi-toolbar-badge-text-color Controls the toolbar badge text color, using color tokens. var(--bsi-color-text-inverse)
--bsi-toolbar-badge-padding-x Controls the toolbar badge padding x, using spacing tokens. var(--bsi-spacing-3xs)
--bsi-toolbar-badge-font-size Controls the toolbar badge font size, using typography tokens. var(--bsi-label-font-size-xs)
--bsi-toolbar-label-margin-top Controls the toolbar label margin top, using spacing tokens. var(--bsi-spacing-3xs)
--bsi-toolbar-label-font-size Controls the toolbar label font size, using typography tokens. var(--bsi-label-font-size-xs)
--bsi-toolbar-padding-x Controls the toolbar inner padding, using spacing tokens. var(--bsi-spacing-xs)
--bsi-toolbar-padding-y Controls the toolbar inner padding, using spacing tokens. var(--bsi-spacing-xs)
--bsi-toolbar-shadow Controls the toolbar shadow, using elevation tokens. var(--bsi-elevation-medium)

Breaking change

  • L’icona del dropdown è ora gestita con il tag <svg>
  • Il contenuto di ogni voce è racchiuso in un contenitore dedicato nel caso di versione con dropdown.
  • Modificata la gestione dell’ombreggiatura, altezza e posizione della toolbar.