Vervolgkeuzelijsten

Schakel contextuele overlays in voor het weergeven van lijsten met links en meer met de Bootstrap dropdown-plug-in.

Op deze pagina

Overzicht

Dropdowns zijn schakelbare, contextuele overlays voor het weergeven van lijsten met links en meer. Ze zijn interactief gemaakt met de meegeleverde Bootstrap dropdown JavaScript-plug-in. Ze worden geschakeld door te klikken, niet door te zweven; dit is een opzettelijke ontwerpbeslissing .

Dropdowns zijn gebouwd op een externe bibliotheek, Popper , die dynamische positionering en viewport-detectie biedt. Zorg ervoor dat u popper.min.js opneemt vóór Bootstrap's JavaScript of gebruik bootstrap.bundle.min.js/ bootstrap.bundle.jsdat Popper bevat. Popper wordt niet gebruikt om dropdowns in navigatiebalken te plaatsen, omdat dynamische positionering niet vereist is.

Toegankelijkheid

De WAI ARIA - standaard definieert een echte role="menu"widget , maar dit is specifiek voor toepassingsachtige menu's die acties of functies activeren. ARIA -menu's kunnen alleen menu-items, menu-items met selectievakjes, menu-items met keuzerondjes, groepen met keuzerondjes en submenu's bevatten.

De vervolgkeuzelijsten van Bootstrap zijn daarentegen zo ontworpen dat ze generiek zijn en toepasbaar op verschillende situaties en opmaakstructuren. Het is bijvoorbeeld mogelijk om dropdowns te maken die extra invoer en formulierbesturingselementen bevatten, zoals zoekvelden of inlogformulieren. Om deze reden verwacht Bootstrap geen van de roleen aria-attributen die vereist zijn voor echte ARIA- menu's (en voegt het ook niet automatisch toe). Auteurs zullen deze meer specifieke attributen zelf moeten opnemen.

Bootstrap voegt echter ingebouwde ondersteuning toe voor de meeste standaard toetsenbordmenu-interacties, zoals de mogelijkheid om door afzonderlijke .dropdown-itemelementen te bladeren met behulp van de cursortoetsen en het menu te sluiten met de ESCtoets.

Voorbeelden

Wikkel de schakelaar van de vervolgkeuzelijst (uw knop of link) en het vervolgkeuzemenu in .dropdown, of een ander element dat declareert position: relative;. Dropdowns kunnen worden geactiveerd vanuit <a>of <button>elementen om beter aan uw potentiële behoeften te voldoen. De hier getoonde voorbeelden gebruiken waar nodig semantische <ul>elementen, maar aangepaste opmaak wordt ondersteund.

Enkele knop

Elke single .btnkan worden omgezet in een vervolgkeuzeknop met enkele opmaakwijzigingen. Hier leest u hoe u ze aan het werk kunt zetten met beide <button>elementen:

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 met <a>elementen:

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>

Het beste is dat je dit ook met elke knopvariant kunt doen:

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

Splitsknop

Maak op dezelfde manier vervolgkeuzemenu's voor gesplitste knoppen met vrijwel dezelfde markeringen als vervolgkeuzelijsten met één knop, maar met de toevoeging van .dropdown-toggle-splitvoor de juiste afstand rond het dropdown-caret.

We gebruiken deze extra klasse om de horizontale lijn paddingaan weerszijden van het dakje met 25% te verminderen en margin-leftde toegevoegde voor normale vervolgkeuzelijsten voor knoppen te verwijderen. Die extra veranderingen houden het caret gecentreerd in de split-knop en zorgen voor een meer geschikt formaat hitgebied naast de hoofdknop.

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

Maatvoering

Dropdownmenu's voor knoppen werken met knoppen van alle formaten, inclusief standaard- en gesplitste vervolgkeuzeknoppen.

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

Kies voor donkere vervolgkeuzelijsten die passen bij een donkere navigatiebalk of aangepaste stijl door deze toe te voegen .dropdown-menu-darkaan een bestaand .dropdown-menu. Er zijn geen wijzigingen nodig in 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 om het in een navigatiebalk te gebruiken:

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>

Routebeschrijving

RTL

Routebeschrijvingen worden gespiegeld bij gebruik van Bootstrap in RTL, wat betekent .dropstartdat aan de rechterkant verschijnt.

gecentreerd

Maak het vervolgkeuzemenu gecentreerd onder de schakelaar met .dropdown-centerop het bovenliggende element.

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>

Drop-up

Activeer vervolgkeuzemenu's boven elementen door toe te voegen .dropupaan het bovenliggende element.

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

Drop-up gecentreerd

Maak het vervolgkeuzemenu gecentreerd boven de schakelaar met .dropup-centerop het bovenliggende element.

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>

drop-end

Activeer vervolgkeuzemenu's rechts van de elementen door toe te voegen .dropendaan het bovenliggende element.

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

Activeer vervolgkeuzemenu's aan de linkerkant van de elementen door toe te voegen .dropstartaan het bovenliggende element.

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

U kunt <a>of <button>elementen gebruiken als 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>

U kunt ook niet-interactieve dropdown-items maken met .dropdown-item-text. Voel je vrij om verder te stylen met aangepaste 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>

Actief

Voeg toe .activeaan items in de vervolgkeuzelijst om ze als actief te stylen . Om de actieve status over te brengen op ondersteunende technologieën, gebruikt u het aria-currentattribuut — met de pagewaarde voor de huidige pagina of truevoor het huidige item in een 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>

Gehandicapt

Voeg toe .disabledaan items in de vervolgkeuzelijst om ze als uitgeschakeld te stylen .

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>

Standaard wordt een vervolgkeuzemenu automatisch 100% vanaf de bovenkant en langs de linkerkant van het bovenliggende menu geplaatst. Je kunt dit veranderen met de directionele .drop*klassen, maar je kunt ze ook besturen met extra modificatieklassen.

Voeg toe .dropdown-menu-endaan een .dropdown-menuom het vervolgkeuzemenu rechts uit te lijnen. Aanwijzingen worden gespiegeld bij gebruik van Bootstrap in RTL, wat betekent .dropdown-menu-enddat aan de linkerkant verschijnt.

Kop op! Dropdowns worden gepositioneerd dankzij Popper, behalve wanneer ze zich in een navigatiebalk bevinden.

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>

Responsieve uitlijning

Als u responsieve uitlijning wilt gebruiken, schakelt u dynamische positionering uit door het data-bs-display="static"kenmerk toe te voegen en de responsieve variatieklassen te gebruiken.

Om het vervolgkeuzemenu rechts uit te lijnen met het opgegeven breekpunt of groter, voegt u .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>

Om het vervolgkeuzemenu links uit te lijnen met het opgegeven breekpunt of groter, voegt u .dropdown-menu-enden toe .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>

Merk op dat u geen data-bs-display="static"attribuut hoeft toe te voegen aan dropdown-knoppen in navigatiebalken, aangezien Popper niet wordt gebruikt in navigatiebalken.

Uitlijningsopties

Met de meeste van de hierboven getoonde opties, is hier een kleine gootsteendemo van verschillende dropdown-uitlijningsopties op één plek.

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

Voeg een koptekst toe om secties van acties in een vervolgkeuzemenu te labelen.

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>

Verdelers

Scheid groepen gerelateerde menu-items met een scheidingslijn.

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

Plaats een willekeurige tekst in een vervolgkeuzemenu met tekst en gebruik spatiëringshulpprogramma's . Houd er rekening mee dat u waarschijnlijk extra formaatstijlen nodig hebt om de menubreedte te beperken.

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

Plaats een formulier in een vervolgkeuzemenu, of maak er een vervolgkeuzemenu van, en gebruik marge- of opvulhulpprogramma's om het de gewenste negatieve ruimte te geven.

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>

Gebruik data-bs-offsetof data-bs-referenceom de locatie van de vervolgkeuzelijst te wijzigen.

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>

Automatisch sluitgedrag

Standaard wordt het vervolgkeuzemenu gesloten wanneer u binnen of buiten het vervolgkeuzemenu klikt. U kunt de autoCloseoptie gebruiken om dit gedrag van de vervolgkeuzelijst te wijzigen.

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

Variabelen

Toegevoegd in v5.2.0

Als onderdeel van Bootstrap's evoluerende benadering van CSS-variabelen, gebruiken dropdowns nu lokale CSS .dropdown-menu-variabelen voor verbeterde realtime aanpassingen. Waarden voor de CSS-variabelen worden ingesteld via Sass, dus Sass-aanpassing wordt ook nog steeds ondersteund.

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

Aanpassing via CSS-variabelen is te zien in de .dropdown-menu-darkklasse waar we specifieke waarden overschrijven zonder dubbele CSS-kiezers toe te voegen.

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

Variabelen voor alle vervolgkeuzelijsten:

$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

Variabelen voor de donkere vervolgkeuzelijst :

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

Variabelen voor de op CSS gebaseerde carets die de interactiviteit van een vervolgkeuzelijst aangeven:

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

Mixins

Mixins worden gebruikt om de op CSS gebaseerde carets te genereren en zijn te vinden in 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;
    }
  }
}

Gebruik

Via gegevensattributen of JavaScript schakelt de vervolgkeuzeplug-in verborgen inhoud (vervolgkeuzemenu's) door de .showklasse op de bovenliggende .dropdown-menu. Er data-bs-toggle="dropdown"wordt vertrouwd op het kenmerk voor het sluiten van vervolgkeuzemenu's op toepassingsniveau, dus het is een goed idee om het altijd te gebruiken.

Op apparaten met aanraakbediening voegt het openen van een vervolgkeuzelijst lege mouseoverhandlers toe aan de directe onderliggende elementen van het <body>element. Deze weliswaar lelijke hack is nodig om een gril in de gebeurtenisdelegatie van iOS te omzeilen , die anders zou voorkomen dat een tik ergens buiten de vervolgkeuzelijst de code activeert die de vervolgkeuzelijst sluit. Zodra de vervolgkeuzelijst is gesloten, worden deze extra lege mouseoverhandlers verwijderd.

Via gegevensattributen

Voeg toe data-bs-toggle="dropdown"aan een link of knop om een vervolgkeuzelijst in te schakelen.

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

Via JavaScript

Roep de vervolgkeuzelijsten op via JavaScript:

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

`data-bs-toggle="dropdown"`nog steeds vereist

Ongeacht of u uw vervolgkeuzelijst via JavaScript oproept of in plaats daarvan de data-api gebruikt, data-bs-toggle="dropdown"moet altijd aanwezig zijn op het trigger-element van de vervolgkeuzelijst.

Opties

Omdat opties kunnen worden doorgegeven via gegevensattributen of JavaScript, kunt u een optienaam toevoegen aan data-bs-, zoals in data-bs-animation="{value}". Zorg ervoor dat u het kasttype van de optienaam wijzigt van " camelCase " in " kebab-case " wanneer u de opties doorgeeft via gegevensattributen. Gebruik bijvoorbeeld in data-bs-custom-class="beautifier"plaats van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteunen alle componenten een experimenteel gereserveerd gegevenskenmerk data-bs-configdat een eenvoudige componentconfiguratie als een JSON-tekenreeks kan bevatten. Wanneer een element attributen heeft data-bs-config='{"delay":0, "title":123}', zal data-bs-title="456"de uiteindelijke titlewaarde zijn 456en zullen de afzonderlijke gegevensattributen de waarden overschrijven die op data-bs-config. Bovendien kunnen bestaande gegevensattributen JSON-waarden zoals data-bs-delay='{"show":0,"hide":150}'.

Naam	Type	Standaard	Beschrijving
`autoClose`	booleaans, string	`true`	Configureer het automatisch sluiten van de vervolgkeuzelijst: `true`- de vervolgkeuzelijst wordt gesloten door buiten of binnen in het vervolgkeuzemenu te klikken. `false`- de vervolgkeuzelijst wordt gesloten door op de schakelknop te klikken en handmatig `hide`of `toggle`methode aan te roepen. (Wordt ook niet afgesloten door op toets te `esc`drukken) `'inside'`- de vervolgkeuzelijst wordt (alleen) gesloten door in het vervolgkeuzemenu te klikken. `'outside'`- de vervolgkeuzelijst wordt (alleen) gesloten door buiten het vervolgkeuzemenu te klikken. Let op: de dropdown kan altijd worden afgesloten met de `ESC`toets.
`boundary`	tekenreeks, element	`'clippingParents'`	Overloopbeperkingsgrens van het vervolgkeuzemenu (alleen van toepassing op de preventOverflow-modifier van Popper). Standaard is `clippingParents`en kan het een HTMLElement-referentie accepteren (alleen via JavaScript). Voor meer informatie raadpleegt u Popper's detectOverflow docs .
`display`	snaar	`'dynamic'`	Standaard gebruiken we Popper voor dynamische positionering. Schakel dit uit met `static`.
`offset`	array, string, functie	`[0, 2]`	Offset van de vervolgkeuzelijst ten opzichte van het doel. U kunt een tekenreeks in gegevensattributen doorgeven met door komma's gescheiden waarden zoals: `data-bs-offset="10,20"`. Wanneer een functie wordt gebruikt om de offset te bepalen, wordt deze aangeroepen met een object dat de popper-plaatsing, de referentie en popper-rects als eerste argument bevat. Het triggerelement DOM-knooppunt wordt doorgegeven als het tweede argument. De functie moet een array teruggeven met twee getallen: skidding , distance . Raadpleeg voor meer informatie de offsetdocumenten van Popper .
`popperConfig`	null, object, functie	`null`	Zie de configuratie van Popper om de standaard Popper-configuratie van Bootstrap te wijzigen . Wanneer een functie wordt gebruikt om de Popper-configuratie te maken, wordt deze aangeroepen met een object dat de standaard Popper-configuratie van Bootstrap bevat. Het helpt u de standaard te gebruiken en samen te voegen met uw eigen configuratie. De functie moet een configuratieobject voor Popper teruggeven.
`reference`	tekenreeks, element, object	`'toggle'`	Referentie-element van het vervolgkeuzemenu. Accepteert de waarden van `'toggle'`, `'parent'`, een HTMLElement-referentie of een object dat `getBoundingClientRect`. Voor meer informatie verwijzen we naar Popper's constructor docs en virtual element docs .

Functie gebruiken met`popperConfig`

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

Methoden:

Methode	Beschrijving
`dispose`	Vernietigt de vervolgkeuzelijst van een element. (Verwijdert opgeslagen gegevens op het DOM-element)
`getInstance`	Statische methode waarmee u de dropdown-instantie kunt koppelen aan een DOM-element, u kunt deze als volgt gebruiken: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statische methode die een dropdown-instantie retourneert die is gekoppeld aan een DOM-element of een nieuwe maakt voor het geval deze niet is geïnitialiseerd. Je kunt het als volgt gebruiken: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Verbergt het vervolgkeuzemenu van een bepaalde navigatiebalk of navigatie met tabbladen.
`show`	Toont het vervolgkeuzemenu van een bepaalde navigatiebalk of navigatie met tabbladen.
`toggle`	Schakelt het vervolgkeuzemenu van een bepaalde navigatiebalk of navigatie met tabbladen in.
`update`	Werkt de positie van de vervolgkeuzelijst van een element bij.

Evenementen

Alle dropdown-gebeurtenissen worden afgevuurd op het schakelelement en vervolgens omhoog geborreld. U kunt dus ook gebeurtenislisteners toevoegen aan het .dropdown-menubovenliggende element 's. hide.bs.dropdownen hidden.bs.dropdowngebeurtenissen hebben een clickEventeigenschap (alleen wanneer het oorspronkelijke gebeurtenistype is click) die een gebeurtenisobject voor de klikgebeurtenis bevat.

Evenementtype	Beschrijving
`hide.bs.dropdown`	Wordt onmiddellijk geactiveerd wanneer de `hide`instantiemethode is aangeroepen.
`hidden.bs.dropdown`	Wordt geactiveerd wanneer de vervolgkeuzelijst is verborgen voor de gebruiker en de CSS-overgangen zijn voltooid.
`show.bs.dropdown`	Wordt onmiddellijk geactiveerd wanneer de `show`instantiemethode wordt aangeroepen.
`shown.bs.dropdown`	Wordt geactiveerd wanneer de vervolgkeuzelijst zichtbaar is gemaakt voor de gebruiker en de CSS-overgangen zijn voltooid.

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

Vervolgkeuzelijsten

Overzicht

Toegankelijkheid

Voorbeelden

Enkele knop

Splitsknop

Maatvoering

Donkere vervolgkeuzelijsten

Routebeschrijving

RTL

gecentreerd

Drop-up

Drop-up gecentreerd

drop-end

Dropstart

Menu items

Actief

Gehandicapt

Menu-uitlijning

Responsieve uitlijning

Uitlijningsopties

Menu-inhoud

Kopteksten

Verdelers

Tekst

Formulieren

Automatisch sluitgedrag

CSS

Variabelen

Sass-variabelen

Mixins

Gebruik

Via gegevensattributen

Via JavaScript

`data-bs-toggle="dropdown"`nog steeds vereist

Opties

Functie gebruiken met`popperConfig`

Methoden:

Evenementen

Vervolgkeuzelijsten

Overzicht

Toegankelijkheid

Voorbeelden

Enkele knop

Splitsknop

Maatvoering

Donkere vervolgkeuzelijsten

Routebeschrijving

RTL

gecentreerd

Drop-up

Drop-up gecentreerd

drop-end

Dropstart

Menu items

Actief

Gehandicapt

Menu-uitlijning

Responsieve uitlijning

Uitlijningsopties

Menu-inhoud

Kopteksten

Dropdown-koptekst

Verdelers

Tekst

Formulieren

Dropdown-opties

Automatisch sluitgedrag

CSS

Variabelen

Sass-variabelen

Mixins

Gebruik

Via gegevensattributen

Via JavaScript

data-bs-toggle="dropdown"nog steeds vereist

Opties

Functie gebruiken metpopperConfig

Methoden:

Evenementen

`data-bs-toggle="dropdown"`nog steeds vereist

Functie gebruiken met`popperConfig`