Menù dropdown
Il componente genera un menù a comparsa, aperto e chiuso attraverso un tag button
.
Nella scrittura del codice si presti attenzione a:
- Assegnare una id univoca al nodo principale dell'elenco
li.nav-item.dropdown
.
Questa id è utilizzata dal codice Javascript per mappare e gestire singolarmente i diversi controlli di questo tipo presenti in pagina. - Assegnare una id univoca al nodo
div.dropdown-menu
al cui interno vi sono le singole voci di menù. - Sincerarsi che l'attributo
aria-controls
del bottone contenga come valore la id precedente.
Aggiungere la classe .active
ai link del dropdown che si vogliono mostrare come attivi. Per l'accessibilità è consigliabile aggiungere <span class="visually-hidden">attivo</span>
in coda al testo degli elementi attivi.
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.
Esempio
<div class="row">
<div class="col-12">
<ul class="navbar-nav">
<li class="nav-item dropdown d-flex" id="cambio_lingua">
<button type="button" aria-expanded="false" aria-controls="menu_cambio_lingua" aria-label="Cambia lingua" class="btn btn-primary" data-focus-mouse="false">Cambia Lingua</button>
<div class="dropdown-menu" id="menu_cambio_lingua">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>Italiano</span></a></li>
<li><a class="list-item active" href="#"><span>English</span> <span class="visually-hidden">attivo</span></a></li>
<li><a class="list-item disabled" aria-disabled="true" href="#"><span>Francais</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Stile dark
Aggiungendo la classe .dark
al dropdown menu si ottiene una versione in negativo dello stesso, con link ed elementi interni declinati di conseguenza. Nell'esempio, lo stile è utilizzato in combinazione con un bottone con classe .btn-secondary
.
<div class="row">
<div class="col-6">
<ul class="navbar-nav">
<li class="nav-item dropdown d-flex" id="AccessoRapido">
<button type="button" aria-expanded="false" aria-controls="menu_accesso_rapido" aria-label="Accesso Rapido" class="btn btn-secondary" data-focus-mouse="false">Accesso Rapido</button>
<div class="dropdown-menu dark" id="menu_accesso_rapido">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>Link 1</span></a></li>
<li><a class="list-item active" href="#"><span>Link 2</span> <span class="visually-hidden">attivo</span></a></li>
<li><a class="list-item disabled" href="#" aria-disabled="true"><span>Link 3</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>