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 , 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. Popper ùn hè micca usatu 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:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
</div>

È cù <a>elementi:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <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>
</div>

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

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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'aghjunzione di .dropdown-toggle-splitun 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.

<!-- 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-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-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-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-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-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.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-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.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-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.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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>

Stòricamente, u cuntenutu di u menù dropdown avia da 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" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <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.

<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 .

<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 .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Per automaticamente, un menu dropdown hè posizionatu automaticamente 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 (eccettu quandu sò cuntenuti in una barra di navigazione).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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 discesa 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-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-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>

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

Intestazioni

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

<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.

<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.

<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.

<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.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </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>
  </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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <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>
</div>

Usu

Via attributi di dati o JavaScript, u plugin drop-down cambia u cuntenutu oculatu (menu drop-down) cumminendu a .showclassa nantu à u parent .dropdown-menu. 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 dropdown.

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

Via JavaScript

Chjamate i 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, fate riferimentu à i documenti offset di Popper .
flip	booleanu	veru	Permette à u Dropdown di flip in casu di sovrapposizione nantu à l'elementu di riferimentu. Per più infurmazione, riferite à Popper'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'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's referenceObject docs .
visualizazione	stringa	'dinamica'	Per automaticamente, usemu Popper per u posizionamentu dinamicu. Disattivà questu cù `static`.
popperConfig	null \| ughjettu	nulla	Per cambià a configurazione Popper predeterminata di Bootstrap, vede a cunfigurazione di Popper

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 (aspittarà a transizione CSS, per compie).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

Dropdowns

Panoramica

L'accessibilità

Esempii

Pulsante unicu

Split buttone

Misure

Indicazioni

Dropup

Dropright

Dropleft

Elementi di menu

Attivu

Disabilitatu

Allineamentu di u menu

Allineamentu responsive

U cuntenutu di u menu

Intestazioni

Divisori

Testu

Forme

Usu

Via attributi di dati

Via JavaScript

`data-toggle="dropdown"`sempre necessariu

Opzioni

I metudi

Avvenimenti

Dropdowns

Panoramica

L'accessibilità

Esempii

Pulsante unicu

Split buttone

Misure

Indicazioni

Dropup

Dropright

Dropleft

Elementi di menu

Attivu

Disabilitatu

Allineamentu di u menu

Allineamentu responsive

U cuntenutu di u menu

Intestazioni

Intestazione a discesa

Divisori

Testu

Forme

Opzioni dropdown

Usu

Via attributi di dati

Via JavaScript

data-toggle="dropdown"sempre necessariu

Opzioni

I metudi

Avvenimenti

`data-toggle="dropdown"`sempre necessariu