Dropdowns

Skeakelje kontekstuele overlays foar it werjaan fan listen mei keppelings en mear mei de Bootstrap dropdown-plugin.

Op dizze side

Oersicht

Dropdowns binne te wikseljen, kontekstuele overlays foar it werjaan fan listen mei keppelings en mear. Se wurde ynteraktyf makke mei it ynbegrepen Bootstrap dropdown JavaScript-plugin. Se wurde wiksele troch te klikken, net troch te sweven; dit is in opsetlike ûntwerpbeslút .

Dropdowns binne boud op in bibleteek fan tredden, Popper , dy't dynamyske posysjonearring en sichtportdeteksje leveret. Wês wis dat jo popper.min.js opnimme foardat Bootstrap's JavaScript of brûk bootstrap.bundle.min.js/ bootstrap.bundle.jsdy't Popper befettet. Popper wurdt net brûkt om dropdowns yn navbars te pleatsen, om't dynamyske posisjonearring net fereaske is.

Tagonklikheid

De WAI ARIA - standert definiearret in wirklike role="menu"widget , mar dit is spesifyk foar applikaasje-like menu's dy't aksjes of funksjes trigger. ARIA -menu's kinne allinich menu-items, karfakje-menu-items, radioknopmenu-items, radioknopgroepen en submenu's befetsje.

De dropdowns fan Bootstrap, oan 'e oare kant, binne ûntworpen om generysk te wêzen en fan tapassing op in ferskaat oan situaasjes en markupstruktueren. It is bygelyks mooglik om dropdowns oan te meitsjen dy't ekstra ynputs en formulierkontrôles befetsje, lykas sykfjilden of oanmeldformulieren. Om dizze reden ferwachtet Bootstrap gjin (net automatysk tafoegje) ien fan 'e roleen aria-attributen dy't nedich binne foar wiere ARIA- menu's. Auteurs sille dizze mear spesifike attributen sels moatte opnimme.

Bootstrap foegje lykwols ynboude stipe ta foar de measte standert toetseboerdmenu-ynteraksjes, lykas de mooglikheid om troch yndividuele .dropdown-itemeleminten te bewegen mei de rinnerketoetsen en it menu te sluten mei de ESCkaai.

Foarbylden

Wrap de skeakel fan it dellûkmenu (jo knop of keppeling) en it dellûkmenu binnen .dropdown, of in oar elemint dat ferklearret position: relative;. Dropdowns kinne wurde aktivearre fan <a>of <button>eleminten om better te passen by jo potensjele behoeften. De hjir werjûn foarbylden brûke semantyske <ul>eleminten wêr passend, mar oanpaste markearring wurdt stipe.

Single knop

Elke single .btnkin wurde feroare yn in dropdown-skeakel mei wat markupwizigingen. Hjir is hoe't jo se mei beide <button>eleminten oan it wurk kinne sette:

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>

En mei <a>eleminten:

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>

It bêste diel is dat jo dit ek kinne dwaan mei elke knopfariant:

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

Split knop

Meitsje op deselde manier split knop dropdowns mei praktysk deselde markup as single knop dropdowns, mar mei de tafoeging fan .dropdown-toggle-splitfoar juste ôfstân om de dropdown caret.

Wy brûke dizze ekstra klasse te ferminderjen de horizontale paddingoan wjerskanten fan 'e caret mei 25% en fuortsmite de margin-leftdat is tafoege foar reguliere knop dropdowns. Dy ekstra feroarings hâlden de caret sintraal yn de split knop en soargje foar in mear passend grutte hit gebiet neist de wichtichste knop.

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

Sizing

Button dropdowns wurkje mei knoppen fan alle grutte, ynklusyf standert en split dropdown knoppen.

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

Donkere dropdowns

Kies foar donkere dropdowns om te passen by in donkere navbar of oanpaste styl troch ta te foegjen .dropdown-menu-darkoan in besteande .dropdown-menu. Gjin wizigingen binne nedich foar de dropdown-items.

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>

En it te brûken yn in navbar:

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>

Rjochtings

RTL

Rjochtingen wurde spegele by it brûken fan Bootstrap yn RTL, betsjutting .dropstartsil oan 'e rjochterkant ferskine.

Sintrearre

Meitsje it dellûkmenu sintraal ûnder de skeakel mei .dropdown-centerop it âlderelemint.

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

Trigger dropdown-menu's boppe eleminten troch ta te foegjen .dropupoan it âlderelemint.

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

Meitsje it útklapmenu sintraal boppe de skeakel mei .dropup-centerop it âlderelemint.

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

Trigger dropdown-menu's rjochts fan 'e eleminten troch ta te foegjen .dropendoan it âlderelemint.

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

Trigger dropdown-menu's links fan 'e eleminten troch ta te foegjen .dropstartoan it âlderelemint.

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

Jo kinne <a>of <button>eleminten brûke as dropdown-items.

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>

Jo kinne ek net-ynteraktive dropdown-items meitsje mei .dropdown-item-text. Fiel jo frij om fierder te stylen mei oanpaste CSS- of teksthulpprogramma's.

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>

Aktyf

Taheakje .activeoan items yn it útklapmenu om se as aktyf te stylearjen . Om de aktive steat oer te bringen oan assistive technologyen, brûk it aria-currentattribút - mei de pagewearde foar de aktuele side, of truefoar it aktuele item yn in 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>

Ynvalide

Taheakje .disabledoan items yn it útklapmenu om se te stylearjen as útskeakele .

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>

Standert wurdt in útklapmenu automatysk 100% fan boppen en lâns de linkerkant fan syn âlder pleatst. Jo kinne dit feroarje mei de rjochtingsklassen .drop*, mar jo kinne se ek kontrolearje mei ekstra modifikaasjeklassen.

Taheakje .dropdown-menu-endoan in .dropdown-menurjochts rjochtsje it dellûkmenu. Rjochtingen wurde spegele by it brûken fan Bootstrap yn RTL, betsjutting .dropdown-menu-endsil ferskine oan 'e linkerkant.

Heads up! Dropdowns wurde gepositioneerd tank oan Popper útsein as se binne befette yn in navbar.

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>

Responsive alignment

As jo responsive ôfstimming wolle brûke, skeakelje dynamyske posysjonearring út troch it data-bs-display="static"attribút ta te foegjen en brûk de responsive fariaasjeklassen.

Om it útklapmenu rjochts.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end út te rjochtsjen mei it opjûne brekpunt of grutter, foegje jo ta .

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>

Om it útklapmenu linksôf te rjochtsjen mei it opjûne brekpunt of grutter, foegje .dropdown-menu-enden ta .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>

Tink derom dat jo gjin data-bs-display="static"attribút taheakje moatte oan dropdown-knoppen yn navbars, om't Popper net brûkt wurdt yn navbars.

Alignment opsjes

Troch de measte fan 'e hjirboppe werjûn opsjes te nimmen, is hjir in lytse demo fan keukenwasken fan ferskate opsjes foar dropdown-ôfstimming op ien plak.

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>

Kopteksten

Foegje in koptekst ta om seksjes fan aksjes te markearjen yn elk útklapmenu.

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>

Dividers

Skieden groepen fan relatearre menu-items mei in divider.

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>

Tekst

Pleats elke tekst yn 'e frije foarm yn in útklapmenu mei tekst en brûk spaasje-hulpprogramma's . Tink derom dat jo wierskynlik ekstra maatstilen nedich binne om de menubreedte te beheinen.

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>

Formulieren

Set in formulier yn in útklapmenu, of meitsje it yn in útklapmenu, en brûk marzje- of padding -helpprogramma's om it de negative romte te jaan dy't jo nedich binne.

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>

Brûk data-bs-offsetof data-bs-referenceom de lokaasje fan it dellûkmenu te feroarjen.

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>

Auto slute gedrach

Standert is it útklapmenu sluten as jo binnen of bûten it útklapmenu klikke. Jo kinne de autoCloseopsje brûke om dit gedrach fan it útklapmenu te feroarjen.

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

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap's evoluearjende oanpak fan CSS-fariabelen, brûke dropdowns no lokale CSS-fariabelen op .dropdown-menufoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

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

Oanpassing fia CSS fariabelen kin sjoen wurde op 'e .dropdown-menu-darkklasse dêr't wy oerskriuwe spesifike wearden sûnder tafoegjen fan dûbele CSS selectors.

  --#{$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 fariabelen

Fariabelen foar alle dropdowns:

$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

Fariabelen foar de tsjustere dropdown :

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

Fariabelen foar de CSS-basearre carets dy't de ynteraktiviteit fan in dropdown oanjaan:

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

Mixins

Mixins wurde brûkt om de CSS-basearre carets te generearjen en kinne fûn wurde yn 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;
    }
  }
}

Gebrûk

Fia gegevensattributen of JavaSkript skeakelt de dropdown-plugin ferburgen ynhâld (útklapmenu's) troch de .showklasse op 'e âlder te wikseljen .dropdown-menu. It data-bs-toggle="dropdown"attribút wurdt fertroud foar it sluten fan dellûkmenu's op in applikaasjenivo, dus it is in goed idee om it altyd te brûken.

Op touch-ynskeakele apparaten, it iepenjen fan in dropdown foeget lege mouseoverhandlers ta oan de direkte bern fan it <body>elemint. Dizze ûnsjogge hack is nedich om in eigensinnigens te wurkjen yn 'e delegaasje fan iOS-eveneminten , dy't oars soe foarkomme dat in tap oeral bûten it dropdown-menu de koade trigger dy't de dropdown slút. Sadree't it útklapmenu is sletten, wurde dizze ekstra lege mouseoverhandlers fuortsmiten.

Fia data attributen

Taheakje data-bs-toggle="dropdown"oan in keppeling of knop om in dropdown te wikseljen.

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

Fia JavaScript

Rop de dropdowns fia JavaScript:

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

`data-bs-toggle="dropdown"`noch nedich

Nettsjinsteande of jo jo dropdown fia JavaScript neame of ynstee de data-api brûke, data-bs-toggle="dropdown"is altyd fereaske om oanwêzich te wêzen op it trigger-elemint fan 'e dropdown.

Opsjes

As opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript, kinne jo in opsjenamme tafoegje oan data-bs-, lykas yn data-bs-animation="{value}". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan " camelCase " nei " kebab-case " as jo de opsjes trochjaan fia gegevensattributen. Brûk bygelyks data-bs-custom-class="beautifier"ynstee fan data-bs-customClass="beautifier".

Fanôf Bootstrap 5.2.0 stypje alle komponinten in eksperiminteel reservearre data-attribút data-bs-configdat ienfâldige komponintkonfiguraasje as in JSON-string kin herbergje. As in elemint hat data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"attributen, de definitive titlewearde sil wêze 456en de aparte gegevens attributen sille oerskriuwe wearden jûn op data-bs-config. Derneist kinne besteande gegevensattributen JSON-wearden lykas data-bs-delay='{"show":0,"hide":150}'.

Namme	Type	Standert	Beskriuwing
`autoClose`	boolean, string	`true`	Konfigurearje it auto-slutgedrach fan 'e dropdown: `true`- it útklapmenu sil wurde sletten troch te klikken bûten of binnen it útklapmenu. `false`- it útklapmenu sil wurde sletten troch te klikken op de wikselknop en manuell oproppen `hide`of `toggle`metoade. (Sille ek net sluten wurde troch op toets te `esc`drukken) `'inside'`- it útklapmenu sil (allinich) sluten wurde troch te klikken yn it útklapmenu. `'outside'`- it útklapmenu sil (allinich) sluten wurde troch bûten it útklapmenu te klikken. Opmerking: it útklapmenu kin altyd sluten wurde mei de `ESC`kaai.
`boundary`	string, element	`'clippingParents'`	Overflow beheining grins fan it dellûk menu (jildt allinnich foar Popper syn preventOverflow modifier). Standert is it `clippingParents`en kin it in HTMLElement-referinsje akseptearje (allinich fia JavaScript). Foar mear ynformaasje ferwize nei Popper's detectOverflow-dokuminten .
`display`	string	`'dynamic'`	Standert brûke wy Popper foar dynamyske posisjonearring. Skeakelje dit út mei `static`.
`offset`	array, string, funksje	`[0, 2]`	Offset fan it dropdown relatyf oan syn doel. Jo kinne in tekenrige trochjaan yn gegevensattributen mei komma-skieden wearden lykas: `data-bs-offset="10,20"`. As in funksje brûkt wurdt om de offset te bepalen, wurdt it neamd mei in objekt dat de popper pleatsing, de referinsje en popperrects as syn earste argumint befettet. It triggerelemint DOM-knooppunt wurdt trochjûn as it twadde argumint. De funksje moat in array weromjaan mei twa nûmers: skidding , ôfstân . Foar mear ynformaasje ferwize nei Popper's offset -dokuminten .
`popperConfig`	null, objekt, funksje	`null`	Om de standert Popper-konfiguraasje fan Bootstrap te feroarjen, sjoch Popper's konfiguraasje . As in funksje wurdt brûkt om de Popper-konfiguraasje te meitsjen, wurdt it neamd mei in objekt dat de standert Popper-konfiguraasje fan de Bootstrap befettet. It helpt jo de standert te brûken en te fusearjen mei jo eigen konfiguraasje. De funksje moat werom in konfiguraasje foarwerp foar Popper.
`reference`	string, elemint, objekt	`'toggle'`	Referinsje elemint fan it dellûk menu. Akseptearret de wearden fan `'toggle'`, `'parent'`, in HTMLElement-referinsje as in objekt dat `getBoundingClientRect`. Foar mear ynformaasje ferwize nei Popper syn constructor docs en firtuele elemint docs .

Mei help fan funksje mei`popperConfig`

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

Metoaden

Metoade	Beskriuwing
`dispose`	Ferneatiget de dropdown fan in elemint. (Ferwidert bewarre gegevens op it DOM-elemint)
`getInstance`	Statyske metoade wêrmei jo de dropdown-eksimplaar kinne krije ferbûn oan in DOM-elemint, jo kinne it sa brûke: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statyske metoade dy't in dropdown-eksimplaar werombringt dy't assosjeare is mei in DOM-elemint of in nij oanmeitsje yn gefal it net inisjalisearre is. Jo kinne it sa brûke: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Ferberget it dellûkmenu fan in opjûne navigaasjebalke of navigaasje mei ljeppers.
`show`	Toant it dellûkmenu fan in opjûne navigaasjebalke of navigaasje mei ljeppers.
`toggle`	Skeakelt it dellûkmenu fan in opjûne navigaasjebalke of navigaasje mei ljeppers.
`update`	Updatet de posysje fan in dellûkmenu fan in elemint.

Eveneminten

Alle dropdown-eveneminten wurde op it wikseljende elemint ûntslein en dan opborreld. Sa kinne jo ek barren-harkers tafoegje oan it âlderelemint fan .dropdown-menu'e. hide.bs.dropdownen hidden.bs.dropdowneveneminten hawwe in clickEventeigenskip (allinne as de oarspronklike Event type is click) dat befettet in Event Object foar de klik evenemint.

Event type	Beskriuwing
`hide.bs.dropdown`	Fires fuortendaliks as de `hide`eksimplaar metoade is oanroppen.
`hidden.bs.dropdown`	Untslein as de dropdown klear is ferburgen foar de brûker en CSS-oergongen binne foltôge.
`show.bs.dropdown`	Fires fuortendaliks as de `show`eksimplaar metoade wurdt neamd.
`shown.bs.dropdown`	Untslein as de dropdown sichtber makke is foar de brûker en CSS-oergongen binne foltôge.

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

Dropdowns

Oersicht

Tagonklikheid

Foarbylden

Single knop

Split knop

Sizing

Donkere dropdowns

Rjochtings

RTL

Sintrearre

Dropup

Dropup sintraal

Dropend

Dropstart

Menu items

Aktyf

Ynvalide

Menu alignment

Responsive alignment

Alignment opsjes

Menu ynhâld

Kopteksten

Dividers

Tekst

Formulieren

Auto slute gedrach

CSS

Fariabelen

Sass fariabelen

Mixins

Gebrûk

Fia data attributen

Fia JavaScript

`data-bs-toggle="dropdown"`noch nedich

Opsjes

Mei help fan funksje mei`popperConfig`

Metoaden

Eveneminten

Dropdowns

Oersicht

Tagonklikheid

Foarbylden

Single knop

Split knop

Sizing

Donkere dropdowns

Rjochtings

RTL

Sintrearre

Dropup

Dropup sintraal

Dropend

Dropstart

Menu items

Aktyf

Ynvalide

Menu alignment

Responsive alignment

Alignment opsjes

Menu ynhâld

Kopteksten

Dropdown koptekst

Dividers

Tekst

Formulieren

Dropdown opsjes

Auto slute gedrach

CSS

Fariabelen

Sass fariabelen

Mixins

Gebrûk

Fia data attributen

Fia JavaScript

data-bs-toggle="dropdown"noch nedich

Opsjes

Mei help fan funksje meipopperConfig

Metoaden

Eveneminten

`data-bs-toggle="dropdown"`noch nedich

Mei help fan funksje mei`popperConfig`