Bootstrap 5.2 / Componenten

Dropdowns

Schakel contextuele overlays voor het tonen van lijsten met links en meer met de dropdown-plugin van Bootstrap.

Overzicht

Dropdowns zijn schakelbare, contextuele overlays om lijsten met links en meer te tonen. Ze worden interactief gemaakt met de meegeleverde dropdown-JavaScript-plugin van Bootstrap. Ze worden geschakeld door te klikken, niet door te hoveren; dat is een bewuste ontwerpkeuze.

Dropdowns zijn gebouwd op een externe bibliotheek, Popper, die dynamische positionering en viewportdetectie verzorgt. Zorg dat je popper.min.js vóór de JavaScript van Bootstrap opneemt, of gebruik bootstrap.bundle.min.js / bootstrap.bundle.js waarin Popper zit. Popper wordt overigens niet gebruikt om dropdowns in navbars te positioneren, omdat dynamische positionering daar niet nodig is.

Toegankelijkheid

De standaard WAI-ARIA definieert een echte role="menu"-widget, maar die is specifiek bedoeld voor applicatieachtige menu's die acties of functies activeren. ARIA-menu's mogen alleen menu-items, selectievakje-menu-items, radioknop-menu-items, radioknopgroepen en submenu's bevatten.

De dropdowns van Bootstrap zijn daarentegen ontworpen om generiek te zijn en toepasbaar in allerlei situaties en markupstructuren. Zo kun je dropdowns maken met extra inputs en formulierbesturingselementen erin, zoals zoekvelden of inlogformulieren. Daarom verwacht Bootstrap geen (en voegt het ook niet automatisch) role- en aria-attributen toe die voor echte ARIA-menu's vereist zijn. Auteurs moeten die specifiekere attributen zelf toevoegen.

Bootstrap biedt wel ingebouwde ondersteuning voor de meeste standaard toetsenbordinteracties met menu's, zoals door de afzonderlijke .dropdown-item-elementen bewegen met de pijltoetsen en het menu sluiten met de ESC-toets.

Voorbeelden

Wikkel de toggle van de dropdown (je knop of link) en het dropdownmenu in .dropdown, of in een ander element dat position: relative; declareert. Dropdowns kunnen vanuit <a>- of <button>-elementen worden geactiveerd, wat beter aansluit bij je mogelijke behoeften. De voorbeelden hier gebruiken waar passend semantische <ul>-elementen, maar eigen markup wordt ondersteund.

Enkele knop

Elke losse .btn kan met een paar markup-aanpassingen in een dropdown-toggle worden veranderd. Zo zet je ze aan het werk met <button>-elementen:

HTML

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown-knop
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</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="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
  </ul>
</div>

Het mooiste is dat dit ook met elke knopvariant kan:

HTML

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Actie
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Losstaande link</a></li>
  </ul>
</div>

Split button

Op vergelijkbare wijze maak je split button-dropdowns met vrijwel dezelfde markup als dropdowns met één knop, met als toevoeging .dropdown-toggle-split voor de juiste tussenruimte rond het dropdown-pijltje.

We gebruiken deze extra klasse om de horizontale padding aan weerszijden van het pijltje met 25% te verkleinen en de margin-left te verwijderen die bij gewone knop-dropdowns wordt toegevoegd. Die extra aanpassingen houden het pijltje in de split button gecentreerd en zorgen voor een passender klikvlak naast de hoofdknop.

HTML

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Actie</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Dropdown in-/uitklappen</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Losstaande link</a></li>
  </ul>
</div>

Afmetingen

Knop-dropdowns werken met knoppen van alle formaten, inclusief standaard- en split-dropdownknoppen.

HTML

<!-- 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">
    Grote knop
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Grote 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">Dropdown in-/uitklappen</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

HTML

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Kleine knop
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Kleine 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">Dropdown in-/uitklappen</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Donkere dropdowns

Kies voor donkerdere dropdowns die passen bij een donkere navbar of eigen stijl door .dropdown-menu-dark aan een bestaande .dropdown-menu toe te voegen. Aan de dropdown-items hoef je niets te wijzigen.

HTML

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown-knop
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Losstaande link</a></li>
  </ul>
</div>

En in gebruik in een 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="Navigatie schakelen">
      <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="#">Actie</a></li>
            <li><a class="dropdown-item" href="#">Nog een actie</a></li>
            <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Richtingen

Let op

RTL

De richtingen worden gespiegeld wanneer je Bootstrap in RTL gebruikt; .dropstart verschijnt dan aan de rechterkant.

Gecentreerd

Centreer het dropdownmenu onder de toggle met .dropdown-center op het bovenliggende element.

HTML

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Gecentreerde dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Actie twee</a></li>
    <li><a class="dropdown-item" href="#">Actie drie</a></li>
  </ul>
</div>

Dropup

Laat dropdownmenu's boven elementen verschijnen door .dropup aan het bovenliggende element toe te voegen.

HTML

<!-- 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">Dropdown in-/uitklappen</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Gecentreerde dropup

Centreer het dropup-menu boven de toggle met .dropup-center op 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">
    Gecentreerde dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Actie twee</a></li>
    <li><a class="dropdown-item" href="#">Actie drie</a></li>
  </ul>
</div>

Dropend

Laat dropdownmenu's rechts van de elementen verschijnen door .dropend aan het bovenliggende element toe te voegen.

HTML

<!-- 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">Dropend in-/uitklappen</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

Laat dropdownmenu's links van de elementen verschijnen door .dropstart aan het bovenliggende element toe te voegen.

HTML

<!-- 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">Dropstart in-/uitklappen</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Je kunt <a>- of <button>-elementen als dropdown-items gebruiken.

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">Actie</button></li>
    <li><button class="dropdown-item" type="button">Nog een actie</button></li>
    <li><button class="dropdown-item" type="button">Iets anders hier</button></li>
  </ul>
</div>

Je kunt met .dropdown-item-text ook niet-interactieve dropdown-items maken. Stijl ze gerust verder met eigen CSS of tekst-utilities.

HTML

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Tekst van dropdown-item</span></li>
  <li><a class="dropdown-item" href="#">Actie</a></li>
  <li><a class="dropdown-item" href="#">Nog een actie</a></li>
  <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
</ul>

Active

Voeg .active toe aan items in de dropdown om ze als actief op te maken. Gebruik het attribuut aria-current om de actieve status aan hulptechnologieën door te geven — met de waarde page voor de huidige pagina, of true voor het huidige item in een set.

HTML

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Gewone link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Actieve link</a></li>
  <li><a class="dropdown-item" href="#">Nog een link</a></li>
</ul>

Disabled

Voeg .disabled toe aan items in de dropdown om ze als uitgeschakeld op te maken.

HTML

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Gewone link</a></li>
  <li><a class="dropdown-item disabled">Uitgeschakelde link</a></li>
  <li><a class="dropdown-item" href="#">Nog een link</a></li>
</ul>

Standaard wordt een dropdownmenu automatisch 100% vanaf de bovenkant en langs de linkerzijde van zijn bovenliggende element gepositioneerd. Dat kun je wijzigen met de richtingsklassen .drop*, maar je kunt het ook met extra modifier-klassen sturen.

Voeg .dropdown-menu-end aan een .dropdown-menu toe om het dropdownmenu rechts uit te lijnen. De richtingen worden gespiegeld wanneer je Bootstrap in RTL gebruikt; .dropdown-menu-end verschijnt dan aan de linkerkant.

Let op

Let op! Dropdowns worden dankzij Popper gepositioneerd, behalve wanneer ze in een navbar zitten.

HTML

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Voorbeeld van rechts uitgelijnd menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Actie</button></li>
    <li><button class="dropdown-item" type="button">Nog een actie</button></li>
    <li><button class="dropdown-item" type="button">Iets anders hier</button></li>
  </ul>
</div>

Responsieve uitlijning

Wil je responsieve uitlijning gebruiken, schakel dan dynamische positionering uit door het attribuut data-bs-display="static" toe te voegen, en gebruik de responsieve variantklassen.

Om het dropdownmenu vanaf het gegeven breakpoint of groter rechts uit te lijnen, voeg je .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end toe.

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">
    Links uitgelijnd, maar rechts uitgelijnd op een groot scherm
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Actie</button></li>
    <li><button class="dropdown-item" type="button">Nog een actie</button></li>
    <li><button class="dropdown-item" type="button">Iets anders hier</button></li>
  </ul>
</div>

Om het dropdownmenu vanaf het gegeven breakpoint of groter links uit te lijnen, voeg je .dropdown-menu-end en .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start toe.

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">
    Rechts uitgelijnd, maar links uitgelijnd op een groot scherm
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Actie</button></li>
    <li><button class="dropdown-item" type="button">Nog een actie</button></li>
    <li><button class="dropdown-item" type="button">Iets anders hier</button></li>
  </ul>
</div>

Let op: je hoeft bij dropdownknoppen in navbars geen data-bs-display="static"-attribuut toe te voegen, omdat Popper in navbars niet wordt gebruikt.

Uitlijningsopties

Hier is, met de meeste opties van hierboven, een kleine demo met allerlei uitlijningsopties voor dropdowns 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">
    Rechts uitgelijnd 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">
    Links uitgelijnd, rechts uitgelijnd vanaf 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">
    Rechts uitgelijnd, links uitgelijnd vanaf 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>

Koppen

Voeg een kop toe om secties met acties in een dropdownmenu te labelen.

HTML

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown-kop</h6></li>
  <li><a class="dropdown-item" href="#">Actie</a></li>
  <li><a class="dropdown-item" href="#">Nog een actie</a></li>
</ul>

Scheidingslijnen

Scheid groepen samenhangende menu-items met een scheidingslijn.

HTML

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Actie</a></li>
  <li><a class="dropdown-item" href="#">Nog een actie</a></li>
  <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Losstaande link</a></li>
</ul>

Tekst

Plaats vrije tekst in een dropdownmenu en gebruik spacing-utilities. Let op: je hebt waarschijnlijk extra afmetingsstijlen nodig om de menubreedte te beperken.

HTML

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Wat voorbeeldtekst die vrij in het dropdownmenu loopt.
  </p>
  <p class="mb-0">
    En dit is nog meer voorbeeldtekst.
  </p>
</div>

Formulieren

Zet een formulier in een dropdownmenu, of maak er zelf een dropdownmenu van, en gebruik margin- of padding-utilities om het de witruimte te geven die je nodig hebt.

HTML

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">E-mailadres</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Wachtwoord</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Wachtwoord">
    </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">
          Onthoud mij
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Inloggen</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Nieuw hier? Meld je aan</a>
  <a class="dropdown-item" href="#">Wachtwoord vergeten?</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-formulier
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">E-mailadres</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Wachtwoord</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Wachtwoord">
    </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">
          Onthoud mij
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Inloggen</button>
  </form>
</div>

Gebruik data-bs-offset of data-bs-reference om de locatie van de dropdown 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="#">Actie</a></li>
      <li><a class="dropdown-item" href="#">Nog een actie</a></li>
      <li><a class="dropdown-item" href="#">Iets anders hier</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">Dropdown in-/uitklappen</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Actie</a></li>
      <li><a class="dropdown-item" href="#">Nog een actie</a></li>
      <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Losstaande link</a></li>
    </ul>
  </div>
</div>

Gedrag bij automatisch sluiten

Standaard sluit het dropdownmenu bij een klik binnen of buiten het dropdownmenu. Met de optie autoClose kun je dat gedrag van de dropdown 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">
    Standaard 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">
    Buiten aanklikbaar
  </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">
    Binnen aanklikbaar
  </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">
    Handmatig sluiten
  </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

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken dropdowns nu lokale CSS-variabelen op .dropdown-menu, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_dropdown.scss in de Bootstrap-broncode.

Aanpassen via CSS-variabelen zie je terug bij de klasse .dropdown-menu-dark, waar we specifieke waarden overschrijven zonder dubbele CSS-selectors toe te voegen.

Standaardwaarden: zie scss/_dropdown.scss in de Bootstrap-broncode.

Sass-variabelen

Variabelen voor alle dropdowns:

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Variabelen voor de donkere dropdown:

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Variabelen voor de op CSS gebaseerde pijltjes die de interactiviteit van een dropdown aangeven:

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Mixins

Mixins worden gebruikt om de op CSS gebaseerde pijltjes te genereren en staan in scss/mixins/_caret.scss.

Standaardwaarden: zie scss/mixins/_caret.scss in de Bootstrap-broncode.

Gebruik

Via data-attributen of JavaScript schakelt de dropdown-plugin verborgen content (dropdownmenu's) door de klasse .show op de bovenliggende .dropdown-menu te schakelen. Het attribuut data-bs-toggle="dropdown" wordt gebruikt om dropdownmenu's op applicatieniveau te sluiten, dus het is verstandig het altijd te gebruiken.

Let op

Op apparaten met aanraakbediening voegt het openen van een dropdown lege mouseover-handlers toe aan de directe kinderen van het <body>-element. Deze weliswaar lelijke truc is nodig om een eigenaardigheid in de event-delegatie van iOS te omzeilen, die anders zou voorkomen dat een tik ergens buiten de dropdown de code activeert die de dropdown sluit. Zodra de dropdown gesloten is, worden die extra lege mouseover-handlers verwijderd.

Via data-attributen

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

HTML

<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 dropdowns via JavaScript aan:

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

Let op

`data-bs-toggle="dropdown"` blijft verplicht

Of je je dropdown nu via JavaScript aanroept of de data-api gebruikt: data-bs-toggle="dropdown" moet altijd op het trigger-element van de dropdown aanwezig zijn.

Opties

De meeste plugins kun je aanzetten zonder JavaScript te schrijven, puur met een data-bs-*-attribuut als trigger. Al deze data-attributen zijn genamespaced met bs-, zodat ze niet botsen met andere scripts.

Naam	Type	Standaard	Omschrijving
`autoClose`	boolean, string	`true`	Bepaalt het gedrag bij automatisch sluiten van de dropdown: `true` — de dropdown sluit bij een klik buiten of binnen het dropdownmenu. `false` — de dropdown sluit door op de toggle-knop te klikken en door de methode `hide` of `toggle` handmatig aan te roepen. (Sluit ook niet met de `esc`-toets) `'inside'` — de dropdown sluit (alleen) bij een klik binnen het dropdownmenu. `'outside'` — de dropdown sluit (alleen) bij een klik buiten het dropdownmenu. Let op: de dropdown kan altijd met de `ESC`-toets gesloten worden.
`boundary`	string, element	`'clippingParents'`	Overflow-begrenzing van het dropdownmenu (geldt alleen voor Poppers preventOverflow-modifier). Standaard is dat `clippingParents`; het kan een verwijzing naar een HTMLElement accepteren (alleen via JavaScript). Zie voor meer informatie Poppers detectOverflow-documentatie.
`display`	string	`'dynamic'`	Standaard gebruiken we Popper voor dynamische positionering. Schakel dat uit met `static`.
`offset`	array, string, function	`[0, 2]`	Offset van de dropdown ten opzichte van zijn doel. Je kunt in data-attributen een string met door komma's gescheiden waarden meegeven, zoals `data-bs-offset="10,20"`. Wanneer een functie de offset bepaalt, wordt die aangeroepen met als eerste argument een object met de popper-plaatsing, de referentie en de popper-rects. De DOM-node van het trigger-element wordt als tweede argument meegegeven. De functie moet een array met twee getallen teruggeven: skidding, distance. Zie voor meer informatie Poppers offset-documentatie.
`popperConfig`	null, object, function	`null`	Zie Poppers configuratie om de standaard Popper-configuratie van Bootstrap te wijzigen. Wanneer een functie de Popper-configuratie maakt, wordt die aangeroepen met een object dat de standaard Popper-configuratie van Bootstrap bevat. Zo kun je die gebruiken en met je eigen configuratie samenvoegen. De functie moet een configuratieobject voor Popper teruggeven.
`reference`	string, element, object	`'toggle'`	Referentie-element van het dropdownmenu. Accepteert de waarden `'toggle'`, `'parent'`, een verwijzing naar een HTMLElement of een object dat `getBoundingClientRect` biedt. Zie voor meer informatie Poppers constructor-documentatie en documentatie over virtuele elementen.

Een functie gebruiken met `popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // gebruik defaultBsPopperConfig indien nodig...
    // return newPopperConfig
  }
})

Methodes

Methode	Omschrijving
`dispose`	Vernietigt de dropdown van een element. (Verwijdert opgeslagen gegevens van het DOM-element)
`getInstance`	Statische methode waarmee je de dropdown-instantie kunt ophalen die bij een DOM-element hoort; je gebruikt hem zo: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statische methode die een dropdown-instantie teruggeeft die bij een DOM-element hoort, of een nieuwe aanmaakt als die nog niet was geïnitialiseerd. Je gebruikt hem zo: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Verbergt het dropdownmenu van een bepaalde navbar of tabbladnavigatie.
`show`	Toont het dropdownmenu van een bepaalde navbar of tabbladnavigatie.
`toggle`	Schakelt het dropdownmenu van een bepaalde navbar of tabbladnavigatie.
`update`	Werkt de positie van de dropdown van een element bij.

Gebeurtenissen

Alle dropdown-gebeurtenissen worden op het toggle-element afgevuurd en bubbelen daarna omhoog. Je kunt dus ook event listeners op het bovenliggende element van de .dropdown-menu zetten. De gebeurtenissen hide.bs.dropdown en hidden.bs.dropdown hebben een eigenschap clickEvent (alleen wanneer het oorspronkelijke gebeurtenistype click is) die een Event-object voor de klikgebeurtenis bevat.

Type gebeurtenis	Omschrijving
`hide.bs.dropdown`	Wordt direct afgevuurd wanneer de instantiemethode `hide` is aangeroepen.
`hidden.bs.dropdown`	Wordt afgevuurd wanneer de dropdown volledig voor de gebruiker verborgen is en de CSS-transities voltooid zijn.
`show.bs.dropdown`	Wordt direct afgevuurd wanneer de instantiemethode `show` wordt aangeroepen.
`shown.bs.dropdown`	Wordt afgevuurd wanneer de dropdown zichtbaar is gemaakt voor de gebruiker en de CSS-transities voltooid zijn.

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

Dropdowns

Overzicht

Toegankelijkheid

Voorbeelden

Enkele knop

Split button

Afmetingen

Donkere dropdowns

Richtingen

RTL

Gecentreerd

Dropup

Gecentreerde dropup

Dropend

Dropstart

Menu-items

Active

Disabled

Menu-uitlijning

Responsieve uitlijning

Uitlijningsopties

Menu-content

Koppen

Scheidingslijnen

Tekst

Formulieren

Gedrag bij automatisch sluiten

CSS

Variabelen

Sass-variabelen

Mixins

Gebruik

Via data-attributen

Via JavaScript

`data-bs-toggle="dropdown"` blijft verplicht

Opties

Een functie gebruiken met `popperConfig`

Methodes

Gebeurtenissen

Dropdowns

Overzicht

Toegankelijkheid

Voorbeelden

Enkele knop

Split button

Afmetingen

Donkere dropdowns

Richtingen

RTL

Gecentreerd

Dropup

Gecentreerde dropup

Dropend

Dropstart

Menu-items

Active

Disabled

Menu-uitlijning

Responsieve uitlijning

Uitlijningsopties

Menu-content

Koppen

Scheidingslijnen

Tekst

Formulieren

Dropdown-opties

Gedrag bij automatisch sluiten

CSS

Variabelen

Sass-variabelen

Mixins

Gebruik

Via data-attributen

Via JavaScript

data-bs-toggle="dropdown" blijft verplicht

Opties

Een functie gebruiken met popperConfig

Methodes

Gebeurtenissen

`data-bs-toggle="dropdown"` blijft verplicht

Een functie gebruiken met `popperConfig`