Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web 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

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.