Spustni meniji

Preklopite kontekstualne prekrivke za prikaz seznamov povezav in več s spustnim vtičnikom Bootstrap.

Na tej strani

Pregled

Spustni meniji so preklopni, kontekstualni prekrivki za prikazovanje seznamov povezav in več. Interaktivni so z vključenim spustnim vtičnikom Bootstrap JavaScript. Preklopijo se s klikom, ne z lebdenjem; to je namerna oblikovalska odločitev .

Spustni meniji so zgrajeni na knjižnici tretje osebe, Popper , ki zagotavlja dinamično pozicioniranje in zaznavanje vidnega polja. Ne pozabite vključiti popper.min.js pred JavaScript Bootstrapa ali uporabite bootstrap.bundle.min.js/ bootstrap.bundle.js, ki vsebuje Popper. Popper se ne uporablja za pozicioniranje spustnih menijev v vrsticah za krmarjenje, čeprav dinamično pozicioniranje ni potrebno.

Dostopnost

Standard WAI ARIA definira dejanski role="menu"gradnik , vendar je to specifično za menije, podobne aplikacijam, ki sprožijo dejanja ali funkcije. Meniji ARIA lahko vsebujejo samo menijske elemente, menijske elemente potrditvenih polj, menijske elemente izbirnih gumbov, skupine izbirnih gumbov in podmenije.

Po drugi strani pa so spustni meniji Bootstrap zasnovani tako, da so generični in uporabni za različne situacije in strukture označevanja. Na primer, mogoče je ustvariti spustne menije, ki vsebujejo dodatne vnose in kontrolnike obrazcev, kot so iskalna polja ali obrazci za prijavo. Iz tega razloga Bootstrap ne pričakuje (niti samodejno doda) nobenega od atributov rolein , potrebnih za prave menije ARIA . Avtorji bodo morali te bolj specifične lastnosti vključiti sami.aria-

Vendar pa Bootstrap dodaja vgrajeno podporo za večino standardnih interakcij z meniji tipkovnice, kot je možnost premikanja po posameznih .dropdown-itemelementih s smernimi tipkami in zapiranje menija s ESCtipko.

Primeri

Zavijte preklop spustnega menija (vaš gumb ali povezava) in spustni meni znotraj .dropdownali drug element, ki deklarira position: relative;. Spustne menije je mogoče sprožiti iz <a>ali <button>elementov, da bolje ustrezajo vašim potencialnim potrebam. Tukaj prikazani primeri uporabljajo semantične <ul>elemente, kjer je to primerno, vendar je podprta oznaka po meri.

En gumb

Vsak posamezen .btnelement lahko spremenite v spustni preklop z nekaj spremembami oznak. Tukaj je opisano, kako jih lahko vključite v delo z obema <button>elementoma:

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>

In z <a>elementi:

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>

Najboljši del je, da lahko to storite tudi s katero koli različico gumbov:

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

Gumb za razdelitev

Podobno ustvarite spustne menije z ločenimi gumbi s skoraj enakimi oznakami kot spustne menije z enim gumbom, vendar z dodatkom .dropdown-toggle-splitza pravilen razmik okoli spustne kazalke.

Ta dodatni razred uporabljamo za zmanjšanje vodoravnice paddingna obeh straneh kazalke za 25 % in odstranitev, margin-leftki je dodan za navadne spustne menije gumbov. Te dodatne spremembe ohranjajo kazalko na sredini gumba za razdelitev in zagotavljajo primernejšo velikost območja zadetka poleg glavnega gumba.

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

Dimenzioniranje

Spustni meniji gumbov delujejo z gumbi vseh velikosti, vključno s privzetimi in razdeljenimi spustnimi gumbi.

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

Temni spustni meniji

Izberite temnejše spustne menije, da se ujemajo s temno vrstico za krmarjenje ali slogom po meri, tako da jih dodate .dropdown-menu-darkobstoječemu .dropdown-menu. Spustnih elementov ni treba spreminjati.

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>

In uporaba v vrstici za krmarjenje:

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>

Navodila

RTL

Ko uporabljate Bootstrap v RTL, se navodila zrcalijo, kar pomeni, da .dropstartse prikažejo na desni strani.

Središče

Postavite spustni meni na sredino pod stikalom z .dropdown-centernadrejenim elementom.

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

Sprožite spustne menije nad elementi z dodajanjem .dropupnadrejenemu elementu.

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

Spust na sredino

Postavite spustni meni na sredino nad preklopom z .dropup-centernadrejenim elementom.

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

Sprožite spustne menije na desni strani elementov z dodajanjem .dropendnadrejenemu elementu.

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

Sprožite spustne menije na levi strani elementov z dodajanjem .dropstartnadrejenemu elementu.

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

<a>Elemente ali lahko uporabite <button>kot spustne elemente.

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>

Ustvarite lahko tudi neinteraktivne spustne elemente z .dropdown-item-text. Oblikujte še naprej s CSS po meri ali besedilnimi pripomočki.

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>

Aktiven

Dodajte .activeelementom v spustnem meniju, da jih oblikujete kot aktivne . Za posredovanje aktivnega stanja podpornim tehnologijam uporabite aria-currentatribut — z uporabo pagevrednosti za trenutno stran ali trueza trenutni element v nizu.

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>

Onemogočeno

Dodajte .disabledelementom v spustnem meniju, da jih oblikujete kot onemogočene .

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>

Privzeto je spustni meni samodejno postavljen 100 % od vrha in vzdolž leve strani nadrejenega. To lahko spremenite z usmerjenimi .drop*razredi, lahko pa jih nadzirate tudi z dodatnimi modifikatorskimi razredi.

Dodajte .dropdown-menu-enda .dropdown-menuza poravnavo spustnega menija v desno. Ko uporabljate Bootstrap v RTL, se navodila zrcalijo, kar pomeni, da .dropdown-menu-endse prikažejo na levi strani.

Glavo pokonci! Spustni meniji so postavljeni zahvaljujoč Popperju, razen če so v vrstici za krmarjenje.

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>

Odzivna poravnava

Če želite uporabiti odzivno poravnavo, onemogočite dinamično pozicioniranje z dodajanjem data-bs-display="static"atributa in uporabite odzivne variacijske razrede.

Če želite poravnati spustni meni z dano ali večjo prelomno točko, dodajte .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>

Če želite levi spustni meni poravnati z dano prelomno točko ali večjo, dodajte .dropdown-menu-endin .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>

Upoštevajte, da vam ni treba dodati data-bs-display="static"atributa spustnim gumbom v vrsticah za krmarjenje, saj se Popper ne uporablja v vrsticah za krmarjenje.

Možnosti poravnave

Če upoštevamo večino zgoraj prikazanih možnosti, je tu majhna predstavitev kuhinjskega korita z različnimi možnostmi poravnave spustnega menija na enem mestu.

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>

Glave

Dodajte glavo, da označite razdelke dejanj v katerem koli spustnem meniju.

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>

Razdelilniki

Ločite skupine povezanih elementov menija z ločevalnikom.

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>

Besedilo

Postavite poljubno prosto oblikovano besedilo v spustni meni z besedilom in uporabite pripomočke za razmik . Upoštevajte, da boste za omejitev širine menija verjetno potrebovali dodatne sloge velikosti.

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>

Obrazci

Postavite obrazec v spustni meni ali ga naredite v spustnem meniju in uporabite pripomočke za rob ali oblazinjenje , da mu zagotovite negativni prostor, ki ga potrebujete.

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>

Uporabite data-bs-offsetali data-bs-reference, da spremenite lokacijo spustnega menija.

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>

Obnašanje samodejnega zapiranja

Privzeto se spustni meni zapre, ko kliknete znotraj ali zunaj spustnega menija. Uporabite lahko autoClosemožnost, da spremenite to vedenje spustnega menija.

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

Spremenljivke

Dodano v v5.2.0

Kot del Bootstrapovega razvijajočega se pristopa spremenljivk CSS spustni meniji zdaj uporabljajo lokalne spremenljivke CSS .dropdown-menuza izboljšano prilagajanje v realnem času. Vrednosti za spremenljivke CSS so nastavljene prek Sass, tako da je še vedno podprto tudi prilagajanje Sass.

  --#{$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};

Prilagajanje prek spremenljivk CSS je mogoče videti v .dropdown-menu-darkrazredu, kjer preglasimo določene vrednosti brez dodajanja podvojenih izbirnikov CSS.

  --#{$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};

Sass spremenljivke

Spremenljivke za vse spustne menije:

$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

Spremenljivke za temni spustni meni :

$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;

Spremenljivke za kazalke na osnovi CSS, ki označujejo interaktivnost spustnega menija:

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

Mixins

Miksini se uporabljajo za generiranje kazalk na osnovi CSS in jih je mogoče najti v 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;
    }
  }
}

Uporaba

Spustni vtičnik prek podatkovnih atributov ali JavaScripta preklopi skrito vsebino (spustne menije), tako da preklopi .showrazred na nadrejenem .dropdown-menu. Atribut data-bs-toggle="dropdown"se uporablja za zapiranje spustnih menijev na ravni aplikacije, zato je dobro, da ga vedno uporabljate.

V napravah, ki podpirajo dotik, odpiranje spustnega menija doda prazne mouseoverupravljalnike neposrednim podrejenim <body>elementom. Ta nedvomno grdi vdor je potreben, da bi se izognili čudnemu delegiranju dogodkov v sistemu iOS , ki bi sicer preprečil, da bi dotik kjer koli zunaj spustnega menija sprožil kodo, ki zapre spustni meni. Ko je spustni meni zaprt, so ti dodatni prazni mouseoverobdelovalci odstranjeni.

Preko podatkovnih atributov

Dodajte data-bs-toggle="dropdown"na povezavo ali gumb, da preklopite spustni meni.

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

Prek JavaScripta

Prikličite spustne menije prek JavaScripta:

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

`data-bs-toggle="dropdown"`še potrebno

Ne glede na to, ali spustni meni pokličete prek JavaScripta ali namesto tega uporabite data-api, data-bs-toggle="dropdown"mora biti vedno prisoten v sprožilnem elementu spustnega menija.

Opcije

Ker je možnosti mogoče posredovati prek podatkovnih atributov ali JavaScripta, lahko dodate ime možnosti v data-bs-, kot v data-bs-animation="{value}". Prepričajte se, da ste spremenili vrsto malega črke imena možnosti iz " camelCase " v " kebab-case ", ko posredujete možnosti prek podatkovnih atributov. Na primer, uporabite data-bs-custom-class="beautifier"namesto data-bs-customClass="beautifier".

Od Bootstrap 5.2.0 naprej vse komponente podpirajo poskusni atribut rezerviranih podatkov, data-bs-configki lahko hrani preprosto konfiguracijo komponente kot niz JSON. Ko ima element atribute data-bs-config='{"delay":0, "title":123}'in data-bs-title="456", bo končna titlevrednost 456in ločeni atributi podatkov bodo preglasili vrednosti, podane na data-bs-config. Poleg tega lahko obstoječi atributi podatkov hranijo vrednosti JSON, kot je data-bs-delay='{"show":0,"hide":150}'.

Ime	Vrsta	Privzeto	Opis
`autoClose`	logična vrednost, niz	`true`	Konfigurirajte samodejno zapiranje spustnega menija: `true`- spustni meni se zapre s klikom zunaj ali znotraj spustnega menija. `false`- spustni meni se zapre s klikom na preklopni gumb in ročnim klicem metode `hide`ali . `toggle`(Prav tako se ne zapre s pritiskom na `esc`tipko) `'inside'`- spustni meni se zapre (le) s klikom znotraj spustnega menija. `'outside'`- spustni meni se zapre (le) s klikom zunaj spustnega menija. Opomba: spustni meni lahko vedno zaprete s `ESC`tipko.
`boundary`	niz, element	`'clippingParents'`	Meja omejitve prelivanja spustnega menija (velja samo za Popperjev modifikator preventOverflow). Privzeto je `clippingParents`in lahko sprejme sklic HTMLElement (samo prek JavaScripta). Za več informacij se obrnite na dokumente Popper's detectOverflow .
`display`	vrvica	`'dynamic'`	Privzeto uporabljamo Popper za dinamično pozicioniranje. Onemogočite to z `static`.
`offset`	polje, niz, funkcija	`[0, 2]`	Odmik spustnega menija glede na njegov cilj. V podatkovnih atributih lahko posredujete niz z vrednostmi, ločenimi z vejico, kot je: `data-bs-offset="10,20"`. Ko se funkcija uporablja za določanje odmika, se pokliče z objektom, ki vsebuje poper postavitev, referenco in popper rects kot prvi argument. Vozlišče sprožilnega elementa DOM je posredovano kot drugi argument. Funkcija mora vrniti matriko z dvema številoma: drsenje , razdalja . Za več informacij glejte Popperjevo dokumentacijo o offsetu .
`popperConfig`	null, predmet, funkcija	`null`	Če želite spremeniti privzeto konfiguracijo Popperja za Bootstrap, glejte Popperjeva konfiguracija . Ko se funkcija uporabi za ustvarjanje Popperjeve konfiguracije, se pokliče z objektom, ki vsebuje privzeto Popperjevo konfiguracijo Bootstrapa. Pomaga vam pri uporabi in združitvi privzetih nastavitev z vašo lastno konfiguracijo. Funkcija mora vrniti konfiguracijski objekt za Popper.
`reference`	niz, element, predmet	`'toggle'`	Referenčni element spustnega menija. Sprejema vrednosti `'toggle'`, `'parent'`, reference HTMLElement ali objekta, ki zagotavlja `getBoundingClientRect`. Za več informacij glejte Popperjeve dokumente o konstruktorjih in dokumente o virtualnih elementih .

Uporaba funkcije z`popperConfig`

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

Metode

Metoda	Opis
`dispose`	Uniči spustni meni elementa. (Odstrani shranjene podatke v elementu DOM)
`getInstance`	Statično metodo, ki vam omogoča, da dobite spustni primerek, povezan z elementom DOM, jo lahko uporabite takole: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statična metoda, ki vrne spustni primerek, povezan z elementom DOM, ali ustvari novega, če ni bil inicializiran. Uporabite ga lahko takole: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Skrije spustni meni dane navigacijske vrstice ali navigacije z zavihki.
`show`	Prikaže spustni meni dane navigacijske vrstice ali navigacije z zavihki.
`toggle`	Preklopi spustni meni dane navigacijske vrstice ali navigacije z zavihki.
`update`	Posodobi položaj spustnega menija elementa.

Dogodki

Vsi spustni dogodki se sprožijo na preklopnem elementu in se nato prikažejo navzgor. Tako lahko dodate tudi poslušalce dogodkov v .dropdown-menunadrejeni element. hide.bs.dropdownin hidden.bs.dropdowndogodki imajo clickEventlastnost (samo če je prvotni tip dogodka click), ki vsebuje objekt dogodka za dogodek klika.

Vrsta dogodka	Opis
`hide.bs.dropdown`	Sproži se takoj, ko `hide`je bila poklicana metoda primerka.
`hidden.bs.dropdown`	Sproži se, ko spustni meni ni več skrit pred uporabnikom in so prehodi CSS končani.
`show.bs.dropdown`	Sproži se takoj, ko `show`se pokliče metoda primerka.
`shown.bs.dropdown`	Sproži se, ko je spustni meni prikazan uporabniku in so prehodi CSS končani.

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

Spustni meniji

Pregled

Dostopnost

Primeri

En gumb

Gumb za razdelitev

Dimenzioniranje

Temni spustni meniji

Navodila

RTL

Središče

Dropup

Spust na sredino

Dropend

Dropstart

Elementi menija

Aktiven

Onemogočeno

Poravnava menija

Odzivna poravnava

Možnosti poravnave

Vsebina menija

Glave

Razdelilniki

Besedilo

Obrazci

Obnašanje samodejnega zapiranja

CSS

Spremenljivke

Sass spremenljivke

Mixins

Uporaba

Preko podatkovnih atributov

Prek JavaScripta

`data-bs-toggle="dropdown"`še potrebno

Opcije

Uporaba funkcije z`popperConfig`

Metode

Dogodki

Spustni meniji

Pregled

Dostopnost

Primeri

En gumb

Gumb za razdelitev

Dimenzioniranje

Temni spustni meniji

Navodila

RTL

Središče

Dropup

Spust na sredino

Dropend

Dropstart

Elementi menija

Aktiven

Onemogočeno

Poravnava menija

Odzivna poravnava

Možnosti poravnave

Vsebina menija

Glave

Spustna glava

Razdelilniki

Besedilo

Obrazci

Spustne možnosti

Obnašanje samodejnega zapiranja

CSS

Spremenljivke

Sass spremenljivke

Mixins

Uporaba

Preko podatkovnih atributov

Prek JavaScripta

data-bs-toggle="dropdown"še potrebno

Opcije

Uporaba funkcije zpopperConfig

Metode

Dogodki

`data-bs-toggle="dropdown"`še potrebno

Uporaba funkcije z`popperConfig`