Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Dropdown Menu

Dropdown Menu

Il Dropdown menu (detto anche menù a tendina) attiva o disattiva overlay contestuali per visualizzare elenchi di link o contenuti di varia natura.

Bottoni dropdown

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.
Per la variante bottone è necessario utilizzare la classe .btn-primary.

Variante Menu
Variante Bottone
<div class="dropdown">
  <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"><use href="/bootstrap-lombardia/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>

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false" data-bs-display="static">
    Apri dropdown
    <svg class="icon-expand icon icon-sm icon-light"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
  </button>
  <div class="dropdown-menu" data-popper-placement="bottom-end">
    <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>

Default

Header & divider
Intestazione
Intestazione
Intestazione

L’arrow di default è posto a sinistra.
Per spostarlo a destra è necessario utilizzare: data-popper-placement='bottom-end' nel div contenente le voci del menu che viene aperto al click.

1
2
3
4
5
6
7
8
9

<div class="dropdown-menu shadow-lg" data-popper-placement="bottom-end">
  <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>

Esempi

. . . 
<li>
  <a class="dropdown-item list-item" href="#"><span>Azione 1</span></a>
</li>
. . . 
<li>
  <a class="dropdown-item list-item active" href="#"><span>Voce Attiva</span></a>
</li>
. . . 
<li>
  <a class="dropdown-item list-item disabled" href="#"><span>Voce disabilitata</span></a>
</li>

Documentazione tecnica

Per i dettagli su tutte le possibilità di funzionamento dei dropdown si veda la relativa pagina.