Unito.it

Tema Unito v2

Menù dropdown

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 fare in modo che i tooltip funzionino è quindi necessario usare la versione bundle che contiene già Popper.js o includere popper.min.js nel codice

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.

Ovviamente, funzionano anche tutte le varianti già disponibili per i bottoni. Di seguito, un esempio di utilizzo con classi .btn-primary, .btn-secondary e .btn-danger:

Aggiungendo la classe.dark al dropdown menu si ottiene una versione in negativo dello stesso, con link ed elementi interni declinati di conseguenza.

Aggiungere la classe .active ai link del dropdown che si vogliono mostrare come attivi. Per questioni di accessibilità è consigliabile aggiungere <span class="sr-only"> 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="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Apri dropdown
    <svg class="icon-expand icon icon-sm icon-light"><use href="./dist/svg/sprite.svg#it-expand"></use></svg>
  </button>
  <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="sr-only"> attivo</span></a></li>
        <li><a class="list-item" href="#"><span>Azione 2</span></a></li>
        <li><a class="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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Apri dropdown
    <svg class="icon-expand icon icon-sm icon-light"><use href="./dist/svg/sprite.svg#it-expand"></use></svg>
  </button>
  <div class="dropdown-menu dark ">
    <div class="link-list-wrapper">
      <ul class="link-list">
        <li><a class="list-item disabled" aria-disabled="true" href="#"><span>Azione 1</span></a></li>
        <li><a class="list-item" href="#"><span>Azione 2</span></a></li>
        <li><a class="list-item" href="#"><span>Azione 3</span></a></li>
      </ul>
    </div>
  </div>
</div>

Drop out, left e right

E? possibile utilizzare un dropdown anche in associazione agli elementi <a>.
E' possibile utilizzare delle classi aggiuntive per determinare la posizione di comparsa delle voci di menù:

Per aprire le voci di menu verso l’alto aggiungere la classe .dropup all’elemento padre

Per aprire le voci di menu verso destra aggiungere la classe .dropright all’elemento padre

Per aprire le voci di menu verso sinistra aggiungere la classe .dropleft all’elemento padre

<div class="dropdown dropup mt-4 mb-4">
  <a class="btn btn-dropdown dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Apri dropdown in alto

  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <div class="link-list-wrapper">
      <ul class="link-list">
        <li><a class="list-item" href="#"><span>Azione 1</span></a></li>
      </ul>
    </div>
  </div>
</div>
<div class="dropdown dropleft mt-4 mb-4">
  <a class="btn btn-dropdown dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Apri dropdown a sinistra
    
  </a>
  <div class="dropdown-menu " aria-labelledby="dropdownMenuLink">
    <div class="link-list-wrapper">
      <ul class="link-list">
        <li><a class="list-item" href="#"><span>Azione 1</span></a></li>
      </ul>
    </div>
  </div>
</div>
<div class="dropdown dropright mt-4 mb-4">
  <a class="btn btn-dropdown dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Apri dropdown a destra
    
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <div class="link-list-wrapper">
      <ul class="link-list">
        <li><a class="list-item" href="#"><span>Azione 1</span></a></li>
      </ul>
    </div>
  </div>
</div>

Accessibilità

Lo standard WAI ARIA definisce un widget role="menu", che però è specifico per i menu applicativi che attivano azioni o funzioni. I menu ARIA 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 di Bootstrap, al contrario, sono progettati per essere generici e applicabili a una varietà di situazioni e strutture di markup. Ad esempio, è possibile creare elenchi a discesa contenenti input e controlli di moduli aggiuntivi, ad esempio campi di ricerca o moduli di accesso. Per questo motivo, Bootstrap non si aspetta (né aggiunge automaticamente) alcuno degli attributi di aria e di ruolo richiesti per i veri menu ARIA. Gli autori dovranno includere questi attributi più specifici.

Tuttavia, Bootstrap aggiunge il supporto integrato 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 cursore e chiude il menu con il tasto ESC.

Torna su