Dropdown
Attiva o disattiva overlay contestuali per visualizzare liste di link ed altro ancora con questi menu a tendina.
Il plugin JavaScript per costruire dropdown è basato su una libreria di terze parti, Popper.js, che si occupa del posizionamento dinamico del dropdown stesso in congiunzione con la sua posizione all’interno del viewport.
Per il corretto funzionamento dei dropdown è necessario assicurarsi che sia incluso il file bootstrap-italia.bundle.min.js che contiene già ogni dipendenza, oppure che il file popper.min.js sia incluso prima del file bootstrap-italia.min.js. Maggiori informazioni si possono trovare alla pagina introduttiva sull’utilizzo del JavaScript di Bootstrap Italia.
Per l’attivazione di un dropdown è sufficiente racchiudere il link per l’apertura e il menu a discesa all’interno di un elemento con classe .dropdown, o un altro elemento che dichiari la position: relative;. I dropdown possono essere attivati da elementi <a> o <button> per soddisfare al meglio le tue esigenze.
Accessibilità
Lo standard WAI ARIA definisce un widget con proprietà role="menu", specifica per i menu applicativi con link o azioni. Questi menu possono contenere solo voci di menu, voci di menu di caselle di controllo, voci di menu dei pulsanti di opzione, gruppi di pulsanti di opzione e sottomenu.
I dropdown del framework Bootstrap sono progettati per essere invece generici e applicabili a una varietà di situazioni e strutture di markup. Per questo motivo, Bootstrap non si aspetta (né aggiunge automaticamente) alcuno degli attributi ARIA e di ruolo richiesti. Gli autori dovranno integrare nel proprio markup gli eventuali attributi specifici e, nel caso di sviluppo di soluzioni che non ricadano nello standard ARIA, porre particolare attenzione a verifiche di accessibilità e test con utenti.
Tuttavia, Bootstrap comprende di base il supporto per la maggior parte delle interazioni standard del menu della tastiera, come la possibilità di spostarsi tra i singoli elementi .list-item usando i tasti freccia, e chiude il menu con il tasto ESC.
Si ricorda che link di navigazione semanticamente sono tag <a>, mentre link che attivano azioni in pagina sono tag <button>, seppur questi ultimi è possibile implementarli in casi molto particolari come tag <a> con proprietà role="button".
Dropdown button
Ogni singolo .btn può essere trasformato in un pulsante per l’apertura di dropdown con del semplice markdown HTML.
Il design di default dei dropdown richiede l’applicazione della classe .btn-dropdown. I link o le voci all’interno del dropdown devono essere contenute in un elemento .link-list.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="dropdown text-center">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Apri dropdown
<svg class="icon-expand icon icon-sm icon-primary"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
</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>
Dropdown button varianti
Ovviamente sono disponibili tutte le varianti già disponibili per i pulsanti. Di seguito, un esempio di utilizzo con classi .btn-primary, .btn-secondary e .btn-danger:
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
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Apri dropdown
<svg class="icon-expand icon icon-sm icon-light"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
</button>
<div class="dropdown-menu">
<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>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Apri dropdown
<svg class="icon-expand icon icon-sm icon-light"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
</button>
<div class="dropdown-menu">
<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>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Apri dropdown
<svg class="icon-expand icon icon-sm icon-light"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
</button>
<div class="dropdown-menu">
<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>
Dropdown link
Lo stesso vale per gli elementi <a>:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="dropdown text-center">
<a class="btn btn-dropdown dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Apri dropdown
<svg class="icon-expand icon icon-sm icon-primary"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
Dropup
Per aprire le voci di menu verso l’alto aggiungere la classe .dropup all’elemento padre.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="dropdown dropup text-center">
<a class="btn btn-dropdown dropdown-toggle" href="#" role="button" id="dropdownMenuDropup" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Apri dropup
<svg class="icon-expand icon icon-sm icon-primary"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuDropup">
<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>
Dropend
Per aprire le voci di menu verso destra aggiungere la classe .dropend all’elemento padre.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="dropdown dropend text-center">
<a class="btn btn-dropdown dropdown-toggle" href="#" role="button" id="dropdownMenuDropright" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Apri dropend
<svg class="icon-expand icon icon-sm icon-primary"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuDropright">
<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>
Dropstart
Per aprire le voci di menu verso sinistra aggiungere la classe .dropstart all’elemento padre.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="dropdown dropstart text-center">
<a class="btn btn-dropdown dropdown-toggle" href="#" role="button" id="dropdownMenuDropleft" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg class="icon-expand icon icon-sm icon-primary"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
Apri dropstart
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuDropleft">
<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>
Dropdown menu
Le voci del menu che viene aperto al click sul pulsante possono essere personalizzate, così come il menu stesso.
Menu voci attive
Aggiungere la classe .active ai link del dropdown che si vogliono mostrare come attivi. Per questioni di accessibilità è consigliabile aggiungere <span class="visually-hidden"> attivo</span> in coda al testo degli elementi attivi.
1
2
3
4
5
6
7
8
9
<div class="dropdown-menu">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item active" href="#"><span>Azione 1</span><span class="visually-hidden"> attivo</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>
Menu voci disabilitate
Aggiungere la classe .disabled ai link del dropdown che si vogliono mostrare come disabilitati. Includere anche la proprietà aria-disabled="true" per comunicare lo stato disabilitato agli utenti dotati di screen reader.
1
2
3
4
5
6
7
8
9
<div class="dropdown-menu">
<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 disabled" href="#" aria-disabled="true"><span>Azione 2</span></a></li>
<li><a class="dropdown-item list-item" href="#"><span>Azione 3</span></a></li>
</ul>
</div>
</div>
Menu con voci grandi
Per aumentare la dimensione dei link contenuti nel dropdown è sufficiente aggiungere agli stessi la classe .large.
1
2
3
4
5
6
7
8
9
<div class="dropdown-menu">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item large" href="#"><span>Azione 1</span></a></li>
<li><a class="list-item large" href="#"><span>Azione 2</span></a></li>
<li><a class="list-item large" href="#"><span>Azione 3</span></a></li>
</ul>
</div>
</div>
Menu a tutta larghezza
Per ottenere un dropdown menu largo quanto l’elemento che contiene il dropdown button è sufficiente aggiungere la classe.full-width al menu stesso. I link e testi contenuti al suo interno saranno disposti in orizzontale.
1
2
3
4
5
6
7
8
9
10
11
<div class="dropdown-menu full-width">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item large" href="#"><span>Azione 1</span></a></li>
<li><a class="list-item large" href="#"><span>Azione 2</span></a></li>
<li><a class="list-item large" href="#"><span>Azione 3</span></a></li>
<li><a class="list-item large" href="#"><span>Azione 4</span></a></li>
<li><a class="list-item large" href="#"><span>Azione 5</span></a></li>
</ul>
</div>
</div>
Menu con icona a destra
Ai link contenuti nel menu può essere aggiunta un’icona illustrativa allineata a destra utilizzando le classi .right-icon sul link <a> e .right sul tag contenitore dell’icona.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="dropdown-menu">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<a class="list-item right-icon" href="#">
<span>Azione 1</span>
<svg class="icon icon-sm icon-primary right"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
</a>
</li>
<li>
<a class="list-item right-icon" href="#">
<span>Azione 2</span>
<svg class="icon icon-sm icon-primary right"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
</a>
</li>
<li>
<a class="list-item right-icon" href="#">
<span>Azione 3</span>
<svg class="icon icon-sm icon-primary right"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
</a>
</li>
</ul>
</div>
</div>
Menu con icona a sinistra
Ai link contenuti nel menu può essere aggiunta un’icona illustrativa allineata a sinistra utilizzando le classi .left-icon sul link <a> e .left sul tag contenitore dell’icona.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="dropdown-menu">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<a class="list-item left-icon" href="#">
<svg class="icon icon-sm icon-primary left"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
<span>Azione 1</span>
</a>
</li>
<li>
<a class="list-item left-icon" href="#">
<svg class="icon icon-sm icon-primary left"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
<span>Azione 2</span>
</a>
</li>
<li>
<a class="list-item left-icon" href="#">
<svg class="icon icon-sm icon-primary left"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
<span>Azione 3</span>
</a>
</li>
</ul>
</div>
</div>
Menu dark
Aggiungendo la classe.dark al dropdown menu si ottiene una versione in negativo dello stesso, con link ed elementi interni declinati di conseguenza.
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
<div class="dropdown-menu dark">
<div class="link-list-wrapper">
<div class="link-list-heading">Intestazione</div>
<ul class="link-list">
<li>
<a class="list-item right-icon active" href="#">
<span>Azione 1 (attivo)</span>
<svg class="icon icon-sm icon-light right"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
</a>
</li>
<li>
<a class="list-item right-icon" href="#">
<span>Azione 2</span>
<svg class="icon icon-sm icon-light right"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
</a>
</li>
<li>
<a class="list-item right-icon" href="#">
<span>Azione 3</span>
<svg class="icon icon-sm icon-light right"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
</a>
</li>
<!-- <li><span class="divider"></span></li> -->
<li>
<a class="list-item right-icon" href="#">
<span>Azione 4</span>
<svg class="icon icon-sm icon-light right"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
</a>
</li>
<li>
<a class="list-item right-icon disabled" href="#" aria-disabled="true">
<span>Azione 5 (disabilitato)</span>
<svg class="icon icon-sm icon-light right"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
</a>
</li>
</ul>
</div>
</div>
Informazioni aggiuntive
Per consultare altri esempi, vedere l’utilizzo di un dropdown con interi form al suo interno, capire meglio come utilizzare attributi data- per l’attivazione o come estendere il funzionamento del plugin JavaScript del dropdown di Bootstrap 5.2.3 , si rimanda alla documentazione sul sito di Bootstrap.