Source

Dropdowns

Toggle overlays contextuale per visualizà listi di ligami è più cù u plugin Bootstrap dropdown.

Panoramica

I dropdowns sò toggleable, overlays contextuale per visualizà listi di ligami è più. Sò fatti interattivi cù u plugin JavaScript Bootstrap dropdown inclusu. Sò cambiati clicchendu, micca passandu; Questa hè una decisione di disignu intenzionale .

I dropdowns sò custruiti nantu à una libreria di terzu, Popper.js , chì furnisce u posizionamentu dinamicu è a rilevazione di viewport. Assicuratevi di include popper.min.js prima di JavaScript di Bootstrap o utilizate bootstrap.bundle.min.js/ bootstrap.bundle.jschì cuntene Popper.js. Popper.js ùn hè micca utilizatu per pusà i dropdowns in i navbars, perchè u posizionamentu dinamicu ùn hè micca necessariu.

Se custruite u nostru JavaScript da a fonte, hè necessariuutil.js .

L'accessibilità

U standard WAI ARIA definisce un role="menu"widget attuale , ma questu hè specificu per i menu di l'applicazione chì attivanu azioni o funzioni. I menu ARIA ponu cuntene solu voci di menu, voci di menu di checkbox, voci di menu di buttone di radio, gruppi di buttone di radio è sottomenu.

I dropdowns di Bootstrap, invece, sò pensati per esse generici è applicabili à una varietà di situazioni è strutture di marcatura. Per esempiu, hè pussibule di creà menu dropdown chì cuntenenu inputs supplementari è cuntrolli di forma, cum'è campi di ricerca o forme di login. Per quessa, Bootstrap ùn aspetta (nè aghjunghje automaticamente) alcunu di l' roleattributi aria-necessarii per i veri menu ARIA . L'autori duveranu include sti attributi più specifichi stessi.

Tuttavia, Bootstrap aghjunghje un supportu integratu per a maiò parte di l'interazzione standard di u menu di u teclatu, cum'è a capacità di passà per .dropdown-itemelementi individuali utilizendu i tasti di cursore è chjude u menu cù a ESCchjave.

Esempii

Imbulighjate u toggle dropdown (u vostru buttone o ligame) è u menù dropdown in .dropdown, o un altru elementu chì dichjara position: relative;. I dropdown ponu esse attivati ​​da <a>o <button>elementi per adattà megliu à i vostri bisogni potenziali.

Pulsante unicu

Ogni singulu .btnpò esse trasfurmatu in un toggle dropdown cù qualchi cambiamenti di marcatura. Eccu cumu pudete mette à travaglià cù i dui <button>elementi:

Action Another action Something else here 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

È cù <a>elementi:

Action Another action Something else here 
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

A più bona parte hè chì pudete fà questu cù qualsiasi variante di buttone, ancu:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Split buttone

In u listessu modu, creanu menu dropdown di u buttone divisu cù praticamente u listessu marcatu cum'è i dropdowns di u buttone unicu, ma cù l'aghjuntu di .dropdown-toggle-splitper un spaziu propiu intornu à u cursore dropdown.

Adupremu sta classa extra per riduce l'orizontale paddingda ogni latu di u caret da 25% è sguassate l' margin-leftaghjustatu per i menu dropdown regulari. Quelli cambiamenti extra mantenenu u caret centratu in u buttone split è furnisce una zona di hit più apprupriata accantu à u buttone principale.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Misure

I buttuni dropdowns funzionanu cù i buttoni di tutte e dimensioni, cumpresi i buttoni dropdown predeterminati è split.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Indicazioni

Dropup

Attiva i menu a tendina sopra l'elementi aghjunghjendu .dropupà l'elementu parent.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

Triggere i menu a tendina à a diritta di l'elementi aghjunghjendu .droprightà l'elementu parent.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

Triggere i menu a tendina à a manca di l'elementi aghjunghjendu .dropleftà l'elementu parent.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Storicamente, i contenuti di menu a tendina duveranu esse ligami, ma ùn hè più u casu cù v4. Ora pudete opzionalmente aduprà <button>elementi in i vostri dropdown invece di solu <a>s.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Pudete ancu creà elementi dropdown non interattivi cù .dropdown-item-text. Sentite liberu di stilà più cù CSS persunalizati o utilità di testu.

Testu di l'elementu dropdown Azzione Un'altra azione Qualcosa altru quì 
<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

Attivu

Aghjunghjite .activeà l'articuli in u menù drop-down per stilallu cum'è attivu .

Ligame regulare Link attivu Un altru ligame 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Disabilitatu

Aghjunghjite .disabledà l'articuli in u menù a tendina per stilallu cum'è disabilitati .

Ligame regulare Ligame disattivatu Un altru ligame 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Per automaticamente, un menu dropdown hè automaticamente posizionatu 100% da a cima è longu à u latu manca di u so parente. Aghjunghjite .dropdown-menu-rightà .dropdown-menua destra allineate u menù a tendina.

A testa alta ! I dropdowns sò posizionati grazia à Popper.js (eccettu quandu sò cuntenuti in una navbar).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Allineamentu responsive

Se vulete usà l'allineamentu responsive, disattiveghjanu a pusizione dinamica aghjunghjendu l' data-display="static"attributu è utilizate e classi di variazione responsiva.

Per allineà ghjustu u menù a tendina cù u puntu di rottura datu o più grande, aghjunghje .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Per allineà a manca u menù a tendina cù u puntu di rottura datu o più grande, aghjunghje .dropdown-menu-rightè .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Innota chì ùn avete micca bisognu di aghjunghje un data-display="static"attributu à i buttoni dropdown in navbars, postu chì Popper.js ùn hè micca usatu in navbars.

U cuntenutu di u menu

Intestazioni

Aghjunghjite un intestazione per etichettate e sezioni di l'azzioni in qualsiasi menu a tendina.

Intestazione a discesa
Azzione Un'altra azione 
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Divisori

Separate gruppi di elementi di menu cunnessi cù un divisore.

Azzione Un'altra azione Qualcosa altru quì
Ligame separatu 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Testu

Mettite qualsiasi testu in forma libera in un menù a tendina cù testu è utilizate utilità di spaziatura . Nota chì probabilmente avete bisognu di stili di dimensioni supplementari per limità a larghezza di u menu.

Qualchese testu d'esempiu chì fluisce in modu liberu in u menù drop-down.

È questu hè più testu di esempiu.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Forme

Mettite un furmulariu in un menù drop-down, o fate in un menù drop-down, è utilizate l'utilità di margine o padding per dà u spaziu negativu chì avete bisognu.

Novu quì ? Firma Password dimenticata? 
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Aduprà data-offseto data-referenceper cambià u locu di u dropdown.

Action Another action Something else here
Action Another action Something else here
Separated link 
<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Usu

Via attributi di dati o JavaScript, u ​​plugin drop-down cambia u cuntenutu oculatu (menu drop-down) cumminendu a .showclassa nantu à l'elementu di a lista parent. L' data-toggle="dropdown"attributu hè affidatu per chjude i menu drop-down à u livellu di l'applicazione, cusì hè una bona idea di sempre aduprà.

Nant'à i dispositi abilitati à u toccu, l'apertura di un menu dropdown aghjunghjenu i manipulatori vacanti ( $.noop) mouseoverà i figlioli immediati di l' <body>elementu. Stu pirata bruttu di sicuru hè necessariu di travaglià intornu à una stranezza in a delegazione di l'avvenimentu di iOS , chì altrimenti impediscenu un toccu in ogni locu fora di u dropdown da attivà u codice chì chjude u dropdown. Una volta u dropdown hè chjusu, sti gestori vacanti supplementari mouseoversò eliminati.

Via attributi di dati

Aghjunghjite data-toggle="dropdown"à un ligame o un buttone per commutà un menu dropdown.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Via JavaScript

Chjamate i menu dropdown via JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"sempre necessariu

Indipendentemente da se chjamate u vostru dropdown via JavaScript o invece utilizate l'api di dati, data-toggle="dropdown"hè sempre necessariu esse presente nantu à l'elementu di attivazione di u dropdown.

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-offset="".

Nome Tipu Default Descrizzione
offset numeru | stringa | funzione 0

Offset di u dropdown relative à u so scopu.

Quandu una funzione hè aduprata per determinà l'offset, hè chjamatu cù un ughjettu chì cuntene a data offset cum'è u so primu argumentu. A funzione deve rinvià un oggettu cù a listessa struttura. L'elementu triggering node DOM hè passatu cum'è u sicondu argumentu.

Per più infurmazione, riferite à i documenti offset di Popper.js .
flip booleanu veru Permette à u Dropdown di flip in casu di sovrapposizione nantu à l'elementu di riferimentu. Per più infurmazione, riferite à Popper.js's flip docs .
cunfini stringa | elementu 'scrollParent' Limite di limitazione di overflow di u menu a tendina. Accetta i valori di 'viewport', 'window', 'scrollParent', o un riferimentu HTMLElement (solu JavaScript). Per più infurmazione riferite à Popper.js's preventOverflow docs .
riferenza stringa | elementu 'passà' Elementu di riferimentu di u menù drop-down. Accetta i valori di 'toggle', 'parent', o un riferimentu HTMLElement. Per più infurmazione riferite à Popper.js's referenceObject docs .
visualizazione stringa 'dinamica' Per automaticamente, usemu Popper.js per u posizionamentu dinamicu. Disattivate questu cù static.

Nota quandu boundaryhè stabilitu à qualsiasi valore altru da 'scrollParent', u stilu position: statichè appiicatu à u .dropdowncuntinuu.

I metudi

Metudu Descrizzione
$().dropdown('toggle') Commuta u menu a discesa di una determinata barra di navigazione o navigazione a tabulazione.
$().dropdown('show') Mostra u menu a discesa di una determinata barra di navigazione o navigazione a tabulazione.
$().dropdown('hide') Nasconde il menu a discesa di una determinata barra di navigazione o navigazione a schede.
$().dropdown('update') Aghjurnate a pusizione di u menù dropdown di un elementu.
$().dropdown('dispose') Distrughje u menu dropdown di un elementu.

Avvenimenti

Tutti l'avvenimenti drop-down sò sparati à l' .dropdown-menuelementu parent 's è anu una relatedTargetpruprietà, chì u valore hè l'elementu di l'ancora basculante. hide.bs.dropdownè hidden.bs.dropdownl'avvenimenti anu una clickEventpruprietà (solu quandu u tipu d'avvenimentu originale hè click) chì cuntene un Oggettu Eventu per l'avvenimentu di clic.

Avvenimentu Descrizzione
show.bs.dropdown Questu avvenimentu spara immediatamente quandu u metudu di l'istanza di mostra hè chjamatu.
shown.bs.dropdown Questu avvenimentu hè sparatu quandu u dropdown hè statu resu visibile à l'utilizatore (aspittà per e transizioni CSS, per compie).
hide.bs.dropdown Questu avvenimentu hè sparatu immediatamente quandu u metudu di istanza di nasconde hè statu chjamatu.
hidden.bs.dropdown Questu avvenimentu hè sparatu quandu u dropdown hà finitu di esse oculatu da l'utilizatore (aspittà per e transizioni CSS, per finisce). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})