Unito.it

Tema Unito v3

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>
Torna su