Bootstrap - Dropdowns: A Beginner's Guide

Ciao a tutti, futuri sviluppatori web! Oggi esploreremo il meraviglioso mondo dei dropdown di Bootstrap. Come il vostro amico insegnante di informatica del quartiere, sono entusiasta di guidarvi in questo viaggio. Non preoccupatevi se non avete mai scritto una riga di codice prima - inizieremo da zero e costruiremo passo dopo passo. Allora, prendete una tazza di caffè (o tè, se è la vostra cosa) e iniziamo!

Cos'è un Dropdown?

Prima di immergerci nel codice, parliamo di cosa sono i dropdown. Immaginate di essere in un ristorante e il cameriere vi consegna un menu. Quel menu è come un dropdown - vi dà una lista di opzioni da scegliere. Nel design web, i dropdown funzionano allo stesso modo. Sono modi compatti per presentare molte scelte agli utenti senza ingombrare la vostra pagina web.

Dropdown di Base

Iniziamo con il dropdown più semplice. Ecco come appare in Bootstrap:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Bottone Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Altra azione</a></li>
<li><a class="dropdown-item" href="#">Qualcosa altro qui</a></li>
</ul>
</div>

Ecco una spiegazione dettagliata:

1. Iniziamo con un <div> con la classe dropdown. Questo è il nostro contenitore.
2. all'interno, abbiamo un <button> che attiva il dropdown. Notate la classe dropdown-toggle e l'attributo data-bs-toggle="dropdown".
3. L'<ul> con la classe dropdown-menu è il contenuto effettivo del dropdown.
4. Ogni <li> all'interno dell'<ul> è un elemento del menu dropdown.

Bottone Dropdown vs. Link Dropdown

Potete creare un dropdown utilizzando sia un bottone che un link. Ecco le differenze:

Bottone Dropdown

Abbiamo già visto questo nel nostro esempio di base. Utilizza l'elemento <button>:

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Bottone Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Elementi del menu -->
</ul>
</div>

Link Dropdown

Per un dropdown basato su un link, utilizziamo un'<a> tag invece:

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Link Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<!-- Elementi del menu -->
</ul>
</div>

La principale differenza è l'elemento HTML utilizzato (<button> vs. <a>), ma funzionano in modo simile.

Varianti

Bootstrap offre diverse varianti di colori per i vostri dropdown. Potete cambiare la classe btn-secondary con una di queste:

• btn-primary
• btn-success
• btn-info
• btn-warning
• btn-danger
• btn-light
• btn-dark

Per esempio:

<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Pericoloso
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Elementi del menu -->
</ul>
</div>

Bottone Diviso

Un bottone dropdown separa l'azione del bottone dal toggle del dropdown:

<div class="btn-group">
<button type="button" class="btn btn-primary">Azione</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Attiva Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Elementi del menu -->
</ul>
</div>

Qui, cliccare la parte sinistra del bottone esegue un'azione, mentre la parte destra apre il dropdown.

Dimensioni

Potete creare dropdown più grandi o più piccoli aggiungendo le classi btn-lg o btn-sm:

Bottone Dropdown Grande

<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Grande
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
<!-- Elementi del menu -->
</ul>
</div>

Bottone Dropdown Piccolo

<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Piccolo
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
<!-- Elementi del menu -->
</ul>
</div>

Dropdown Scuro

Per un dropdown con un tema scuro, aggiungete la classe dropdown-menu-dark alla vostra dropdown-menu:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Scuro
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
<!-- Elementi del menu -->
</ul>
</div>

Direzioni

Bootstrap vi permette di cambiare la direzione dei vostri dropdown. Esploriamo queste opzioni:

Dropdown Centrato

Per centrare il vostro menu dropdown, aggiungete la classe dropdown-center al contenitore:

<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Centrato
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
<!-- Elementi del menu -->
</ul>
</div>

Dropup

Per un dropdown che si apre verso l'alto, utilizzate la classe dropup:

<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<!-- Elementi del menu -->
</ul>
</div>

Dropup Centrato

Combinare dropup e dropdown-center per un dropup centrato:

<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup Centrato
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
<!-- Elementi del menu -->
</ul>
</div>

Dropend

Per un dropdown che si apre a destra, utilizzate la classe dropend:

<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<!-- Elementi del menu -->
</ul>
</div>

Dropstart

Per un dropdown che si apre a sinistra, utilizzate la classe dropstart:

<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<!-- Elementi del menu -->
</ul>
</div>

Elementi del Menu

Ora, parliamo di cosa va dentro il vostro menu dropdown. Avete diverse opzioni:

Intestazioni

Aggiungete un'intestazione per raggruppare gli elementi del menu:

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Intestazione Dropdown</h6></li>
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Altra azione</a></li>
</ul>

Separatori

Utilizzate separatori per separare gruppi di elementi correlati:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Altra azione</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Qualcosa altro qui</a></li>
</ul>

Testo

Potete anche includere testo non interattivo:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Altra azione</a></li>
<li><a class="dropdown-item" href="#">Qualcosa altro qui</a></li>
<li><span class="dropdown-item-text">Testo elemento dropdown</span></li>
</ul>

Formulari

Potete anche includere formulari nei vostri dropdown:

<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Indirizzo Email</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Ricordami
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Accedi</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Nuovo da queste parti? Registrati</a>
<a class="dropdown-item" href="#">Ha dimenticato la password?</a>
</div>

Allineamento del Menu

Per impostazione predefinita, i menu dropdown sono allineati a sinistra. Potete cambiare questo con le classi di allineamento:

Menu Allineato a Destra

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Menu Allineato a Destra
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<!-- Elementi del menu -->
</ul>
</div>

Allineamento Responsivo

Potete anche rendere l'allineamento responsivo:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Allineato a Sinistra ma Allineato a Destra su Schermi Grandi
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
<!-- Elementi del menu -->
</ul>
</div>

Questo dropdown sarà allineato a sinistra per impostazione predefinita, ma allineato a destra su schermi grandi e superiori.

Opzioni del Dropdown

I dropdown di Bootstrap vengono con alcune opzioni aggiuntive:

Comportamento di Chiusura Automatica

Potete controllare come il dropdown si chiude con l'attributo data-bs-auto-close:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Cliccabile Fuori
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Elementi del menu -->
</ul>
</div>

Le opzioni per data-bs-auto-close sono:

• true (predefinito): Chiude il dropdown quando si clicca fuori o dentro il dropdown
• false: Il dropdown non si chiude quando si clicca fuori o dentro
• inside: Chiude il dropdown quando si clicca dentro il dropdown
• outside: Chiude il dropdown quando si clicca fuori il dropdown

Ecco tutto! Avete appena completato un giro di boa attraverso i dropdown di Bootstrap. Ricordatevi, la pratica fa la perfezione, quindi non avete paura di sperimentare con questi esempi. Buon codice e possa i vostri dropdown sempre aprire nella direzione giusta!

Credits: Image by storyset