Mențiuni derulante

Comutați suprapunerile contextuale pentru afișarea listelor de linkuri și multe altele cu pluginul derulant Bootstrap.

Pe aceasta pagina

Prezentare generală

Mențiunile derulante sunt suprapuneri contextuale care se pot comuta pentru afișarea listelor de linkuri și multe altele. Sunt făcute interactive cu pluginul JavaScript inclus Bootstrap. Acestea sunt comutate făcând clic, nu prin trecerea cursorului; aceasta este o decizie de proiectare intenționată .

Mențiunile derulante sunt construite pe o bibliotecă terță parte, Popper , care oferă poziționare dinamică și detectarea ferestrelor de vizualizare. Asigurați-vă că includeți popper.min.js înainte de JavaScript-ul Bootstrap sau utilizați bootstrap.bundle.min.js/ bootstrap.bundle.jscare conține Popper. Popper nu este folosit pentru a poziționa meniurile derulante în barele de navigare, deși nu este necesară poziționarea dinamică.

Accesibilitate

Standardul WAI ARIA role="menu" definește un widget real , dar acesta este specific meniurilor de tip aplicație care declanșează acțiuni sau funcții. Meniurile ARIA pot conține numai elemente de meniu, elemente de meniu casete de selectare, elemente de meniu cu butoane radio, grupuri de butoane radio și submeniuri.

Mențiunile derulante ale Bootstrap, pe de altă parte, sunt concepute pentru a fi generice și aplicabile unei varietăți de situații și structuri de marcare. De exemplu, este posibil să creați meniuri derulante care conțin intrări suplimentare și controale de formular, cum ar fi câmpuri de căutare sau formulare de conectare. Din acest motiv, Bootstrap nu așteaptă (și nici nu adaugă automat) niciunul dintre atributele roleși aria-necesare pentru meniurile ARIA adevărate. Autorii vor trebui să includă ei înșiși aceste atribute mai specifice.

Cu toate acestea, Bootstrap adaugă suport încorporat pentru majoritatea interacțiunilor standard cu meniul tastaturii, cum ar fi capacitatea de a vă deplasa prin .dropdown-itemelemente individuale folosind tastele cursorului și de a închide meniul cu ESCtasta.

Exemple

Închideți comutatorul drop-down (butonul sau linkul dvs.) și meniul drop-down în .dropdown, sau alt element care declară position: relative;. Dropdown-urile pot fi declanșate de la <a>sau <button>elemente care să se potrivească mai bine nevoilor dumneavoastră potențiale. Exemplele prezentate aici folosesc <ul>elemente semantice acolo unde este cazul, dar marcajul personalizat este acceptat.

Un singur buton

Orice single .btnpoate fi transformat într-un meniu derulant cu unele modificări de markup. Iată cum le puteți pune în funcțiune cu oricare dintre <button>elemente:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Și cu <a>elemente:

html

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

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

Cea mai bună parte este că puteți face acest lucru și cu orice variantă de buton:

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

Buton de împărțire

În mod similar, creați meniuri derulante cu butoane împărțite cu practic același marcaj ca și meniurile derulante cu un singur buton, dar cu adăugarea de .dropdown-toggle-splitpentru o spațiere adecvată în jurul indicatorului derulant.

Folosim această clasă suplimentară pentru a reduce orizontalul de paddingpe fiecare parte a indicatorului cu 25% și pentru a elimina cele margin-leftadăugate pentru butoanele derulante obișnuite. Aceste modificări suplimentare mențin marcajul centrat în butonul despărțit și oferă o zonă de lovire de dimensiuni mai adecvate lângă butonul principal.

<!-- 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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Dimensiunea

Butoanele derulante funcționează cu butoane de toate dimensiunile, inclusiv butoanele implicite și divizate.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Meniuri derulante întunecate

Optați pentru meniuri derulante mai întunecate pentru a se potrivi cu o bară de navigare întunecată sau cu un stil personalizat, adăugând .dropdown-menu-darkla o bară existentă .dropdown-menu. Nu sunt necesare modificări la elementele derulante.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Și folosirea acesteia într-o bară de navigare:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Directii

RTL

Indicațiile sunt reflectate atunci când utilizați Bootstrap în RTL, ceea ce înseamnă că .dropstartvor apărea în partea dreaptă.

Centrat

Faceți meniul derulant centrat sub comutatorul cu .dropdown-centerelementul părinte.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup

Declanșați meniuri drop-down deasupra elementelor adăugând .dropupla elementul părinte.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropup centrat

Faceți meniul drop-up centrat deasupra comutatorului cu .dropup-centerpe elementul părinte.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Declanșați meniurile drop-down din dreapta elementelor adăugând .dropendla elementul părinte.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

Declanșați meniurile drop-down din stânga elementelor adăugând .dropstartla elementul părinte.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Puteți utiliza <a>sau <button>elemente ca elemente drop-down.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

De asemenea, puteți crea elemente derulante non-interactive cu .dropdown-item-text. Simțiți-vă liber să stilați mai mult cu CSS personalizate sau utilitare text.

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Activ

Adăugați .activeelementele din meniul drop-down pentru a le stila ca active . Pentru a transmite starea activă tehnologiilor de asistență, utilizați aria-currentatributul — folosind pagevaloarea pentru pagina curentă sau truepentru elementul curent dintr-un set.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Dezactivat

Adăugați .disabledelementele din meniul derulant pentru a le stila ca fiind dezactivate .

html

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

În mod implicit, un meniu derulant este poziționat automat 100% din partea de sus și de-a lungul părții stângi a părintelui său. Puteți schimba acest lucru cu .drop*clasele direcționale, dar le puteți controla și cu clase modificatoare suplimentare.

Adăugați .dropdown-menu-endla .dropdown-menua aliniați la dreapta meniul drop-down. Indicațiile sunt reflectate atunci când utilizați Bootstrap în RTL, ceea ce înseamnă că .dropdown-menu-endvor apărea în partea stângă.

Atenție! Mențiunile derulante sunt poziționate datorită lui Popper, cu excepția cazului în care sunt conținute într-o bară de navigare.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Aliniere receptivă

Dacă doriți să utilizați alinierea receptivă, dezactivați poziționarea dinamică adăugând data-bs-display="static"atributul și utilizați clasele de variație receptivă.

Pentru a alinia dreapta meniului drop-down cu punctul de întrerupere dat sau mai mare, adăugați .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

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

Pentru a alinia meniul derulant din stânga.dropdown-menu-end cu punctul de întrerupere dat sau mai mare, adăugați și .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

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

Rețineți că nu trebuie să adăugați un data-bs-display="static"atribut la butoanele drop-down din barele de navigare, deoarece Popper nu este folosit în barele de navigare.

Opțiuni de aliniere

Luând majoritatea opțiunilor afișate mai sus, iată o mică demonstrație a chiuvetei de bucătărie cu diferite opțiuni de aliniere dropdown într-un singur loc.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Anteturi

Adăugați un antet pentru a eticheta secțiunile de acțiuni din orice meniu vertical.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Divizoare

Separați grupurile de elemente de meniu asociate cu un divizor.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Text

Plasați orice text cu formă liberă într-un meniu derulant cu text și utilizați utilitare de spațiere . Rețineți că probabil veți avea nevoie de stiluri de dimensionare suplimentare pentru a limita lățimea meniului.

html

<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

Puneți un formular într-un meniu derulant sau transformați-l într-un meniu derulant și utilizați utilități de marjă sau de umplutură pentru a-i oferi spațiul negativ de care aveți nevoie.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <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>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <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>
</div>

Folosiți data-bs-offsetsau data-bs-referencepentru a schimba locația meniului derulant.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Comportament de închidere automată

În mod implicit, meniul drop-down este închis când faceți clic în interiorul sau în afara meniului drop-down. Puteți utiliza autoCloseopțiunea pentru a modifica acest comportament al meniului derulant.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

Variabile

Adăugat în v5.2.0

Ca parte a abordării în evoluție a variabilelor CSS a Bootstrap, meniurile drop-down folosesc acum variabile CSS locale activate .dropdown-menupentru personalizare îmbunătățită în timp real. Valorile pentru variabilele CSS sunt setate prin Sass, astfel încât personalizarea Sass este încă acceptată.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

Personalizarea prin variabile CSS poate fi văzută în .dropdown-menu-darkclasa în care suprascriem anumite valori fără a adăuga selectoare CSS duplicate.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Variabile Sass

Variabile pentru toate meniurile derulante:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Variabile pentru meniul derulant întunecat :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

Variabile pentru marcajele bazate pe CSS care indică interactivitatea unui meniu derulant:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Mixine

Mixinele sunt folosite pentru a genera semnele care se bazează pe CSS și pot fi găsite în scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Utilizare

Prin intermediul atributelor de date sau JavaScript, pluginul drop-down comută conținutul ascuns (meniurile drop-down) prin comutarea .showclasei la părinte .dropdown-menu. Atributul data-bs-toggle="dropdown"se bazează pe închiderea meniurilor drop-down la nivel de aplicație, așa că este o idee bună să îl utilizați întotdeauna.

Pe dispozitivele cu atingere, deschiderea unui meniu drop-down adaugă handlere goale mouseoverla copiii imediati ai <body>elementului. Acest hack desigur urat este necesar pentru a rezolva o ciudatenie în delegarea evenimentului iOS , care altfel ar împiedica o atingere oriunde în afara meniului derulant să declanșeze codul care închide meniul derulant. Odată ce meniul derulant este închis, acești handlere suplimentare goale mouseoversunt eliminate.

Prin atribute de date

Adăugați data-bs-toggle="dropdown"la un link sau la un buton pentru a comuta un meniu drop-down.

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

Prin JavaScript

Apelați meniurile derulante prin JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`încă necesar

Indiferent dacă apelați meniul drop-down prin JavaScript sau utilizați în schimb data-api, data-bs-toggle="dropdown"este întotdeauna necesar să fie prezent pe elementul de declanșare al meniului drop-down.

Opțiuni

Deoarece opțiunile pot fi transmise prin atribute de date sau JavaScript, puteți adăuga un nume de opțiune la data-bs-, ca în data-bs-animation="{value}". Asigurați-vă că schimbați tipul de caz al numelui opțiunii din „ camelCase ” în „ kebab-case ” atunci când treceți opțiunile prin atributele de date. De exemplu, utilizați data-bs-custom-class="beautifier"în loc de data-bs-customClass="beautifier".

Începând cu Bootstrap 5.2.0, toate componentele acceptă un atribut de date rezervat experimentaldata-bs-config care poate găzdui configurarea simplă a componentelor ca șir JSON. Când un element are data-bs-config='{"delay":0, "title":123}'și data-bs-title="456"atribute, valoarea finală titleva fi 456și atributele de date separate vor înlocui valorile date pe data-bs-config. În plus, atributele de date existente pot găzdui valori JSON precum data-bs-delay='{"show":0,"hide":150}'.

Nume	Tip	Mod implicit	Descriere
`autoClose`	boolean, șir	`true`	Configurați comportamentul de închidere automată a meniului derulant: `true`- meniul derulant va fi închis făcând clic în afara sau în interiorul meniului derulant. `false`- meniul drop-down va fi închis făcând clic pe butonul de comutare și apelând manual `hide`sau `toggle`metoda. (De asemenea, nu va fi închis prin apăsarea `esc`tastei) `'inside'`- meniul derulant va fi închis (doar) făcând clic în interiorul meniului derulant. `'outside'`- meniul drop-down va fi închis (doar) făcând clic în afara meniului drop-down. Notă: meniul drop-down poate fi întotdeauna închis cu `ESC`cheia.
`boundary`	sfoară, element	`'clippingParents'`	Limita constrângerii de depășire a meniului drop-down (se aplică numai modificatorului Popper preventOverflow). În mod implicit, este `clippingParents`și poate accepta o referință HTMLElement (numai prin JavaScript). Pentru mai multe informații, consultați documentele detectOverflow ale lui Popper .
`display`	şir	`'dynamic'`	În mod implicit, folosim Popper pentru poziționarea dinamică. Dezactivați acest lucru cu `static`.
`offset`	matrice, șir, funcție	`[0, 2]`	Deplasarea meniului derulant în raport cu ținta sa. Puteți trece un șir în atributele de date cu valori separate prin virgulă, cum ar fi: `data-bs-offset="10,20"`. Când o funcție este utilizată pentru a determina offset-ul, este apelată cu un obiect care conține plasarea popperului, referința și rectele popper ca prim argument. Elementul de declanșare nodul DOM este transmis ca al doilea argument. Funcția trebuie să returneze o matrice cu două numere: skidding , distance . Pentru mai multe informații, consultați documentele despre offset ale lui Popper .
`popperConfig`	nul, obiect, funcție	`null`	Pentru a schimba configurația Popper implicită a Bootstrap, consultați configurația lui Popper . Când o funcție este folosită pentru a crea configurația Popper, este apelată cu un obiect care conține configurația implicită Popper a Bootstrap. Vă ajută să utilizați și să îmbinați configurația implicită cu propria dvs. configurație. Funcția trebuie să returneze un obiect de configurare pentru Popper.
`reference`	sfoară, element, obiect	`'toggle'`	Element de referință al meniului drop-down. Acceptă valorile `'toggle'`, `'parent'`, o referință HTMLElement sau un obiect care furnizează `getBoundingClientRect`. Pentru mai multe informații, consultați documentele de construcție ale lui Popper și documentele pentru elemente virtuale .

Folosind funcția cu`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Metode

Metodă	Descriere
`dispose`	Distruge meniul drop-down al unui element. (Elimină datele stocate pe elementul DOM)
`getInstance`	Metodă statică care vă permite să obțineți instanța drop-down asociată unui element DOM, o puteți utiliza astfel: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Metodă statică care returnează o instanță derulantă asociată unui element DOM sau creează una nouă în cazul în care nu a fost inițializată. Îl poți folosi astfel: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Ascunde meniul drop-down al unei anumite bare de navigare sau navigare cu file.
`show`	Afișează meniul drop-down al unei anumite bare de navigare sau al navigării cu file.
`toggle`	Comută meniul derulant al unei anumite bare de navigare sau al navigării cu file.
`update`	Actualizează poziția meniului derulant al unui element.

Evenimente

Toate evenimentele drop-down sunt declanșate la elementul de comutare și apoi sunt difuzate. Deci, puteți adăuga și ascultători de evenimente pe .dropdown-menuelementul părinte al lui. hide.bs.dropdowniar hidden.bs.dropdownevenimentele au o clickEventproprietate (doar atunci când tipul de eveniment original este click) care conține un obiect eveniment pentru evenimentul de clic.

Tip de eveniment	Descriere
`hide.bs.dropdown`	Se declanșează imediat când `hide`metoda instanței a fost apelată.
`hidden.bs.dropdown`	Declanșat când meniul drop-down a terminat de a fi ascuns utilizatorului și tranzițiile CSS s-au finalizat.
`show.bs.dropdown`	Se declanșează imediat când `show`este apelată metoda instanței.
`shown.bs.dropdown`	Declanșat când meniul drop-down a fost făcut vizibil pentru utilizator și tranzițiile CSS s-au finalizat.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

Mențiuni derulante

Prezentare generală

Accesibilitate

Exemple

Un singur buton

Buton de împărțire

Dimensiunea

Meniuri derulante întunecate

Directii

RTL

Centrat

Dropup

Dropup centrat

Dropend

Dropstart

Elemente de meniu

Activ

Dezactivat

Alinierea meniului

Aliniere receptivă

Opțiuni de aliniere

Conținutul meniului

Anteturi

Divizoare

Text

Forme

Comportament de închidere automată

CSS

Variabile

Variabile Sass

Mixine

Utilizare

Prin atribute de date

Prin JavaScript

`data-bs-toggle="dropdown"`încă necesar

Opțiuni

Folosind funcția cu`popperConfig`

Metode

Evenimente

Mențiuni derulante

Prezentare generală

Accesibilitate

Exemple

Un singur buton

Buton de împărțire

Dimensiunea

Meniuri derulante întunecate

Directii

RTL

Centrat

Dropup

Dropup centrat

Dropend

Dropstart

Elemente de meniu

Activ

Dezactivat

Alinierea meniului

Aliniere receptivă

Opțiuni de aliniere

Conținutul meniului

Anteturi

Antet derulant

Divizoare

Text

Forme

Opțiuni drop-down

Comportament de închidere automată

CSS

Variabile

Variabile Sass

Mixine

Utilizare

Prin atribute de date

Prin JavaScript

data-bs-toggle="dropdown"încă necesar

Opțiuni

Folosind funcția cupopperConfig

Metode

Evenimente

`data-bs-toggle="dropdown"`încă necesar

Folosind funcția cu`popperConfig`