Dropdowns

Schalten Sie mit dem Bootstrap-Dropdown-Plug-in kontextabhängige Overlays zum Anzeigen von Linklisten und mehr um.

Auf dieser Seite

Überblick

Dropdowns sind umschaltbare, kontextabhängige Overlays zum Anzeigen von Linklisten und mehr. Sie werden mit dem enthaltenen Bootstrap-Dropdown-JavaScript-Plugin interaktiv gemacht. Sie werden durch Klicken umgeschaltet, nicht durch Bewegen der Maus; Dies ist eine bewusste Designentscheidung .

Dropdowns basieren auf einer Bibliothek eines Drittanbieters, Popper , die dynamische Positionierung und Ansichtsfenstererkennung bietet. Stellen Sie sicher, dass Sie popper.min.js vor dem JavaScript von Bootstrap einfügen oder bootstrap.bundle.min.js/ verwenden bootstrap.bundle.js, das Popper enthält. Popper wird jedoch nicht zum Positionieren von Dropdowns in Navigationsleisten verwendet, da eine dynamische Positionierung nicht erforderlich ist.

Barrierefreiheit

Der WAI ARIA -Standard definiert ein eigentliches role="menu"Widget , aber das ist spezifisch für anwendungsähnliche Menüs, die Aktionen oder Funktionen auslösen. ARIA -Menüs können nur Menüelemente, Kontrollkästchen-Menüelemente, Optionsfeld-Menüelemente, Optionsfeldgruppen und Untermenüs enthalten.

Die Dropdowns von Bootstrap hingegen sind so konzipiert, dass sie generisch sind und auf eine Vielzahl von Situationen und Markup-Strukturen anwendbar sind. Beispielsweise ist es möglich, Dropdowns zu erstellen, die zusätzliche Eingaben und Formularsteuerelemente wie Suchfelder oder Anmeldeformulare enthalten. Aus diesem Grund erwartet Bootstrap keine der für echte ARIA - Menüs erforderlichen Attribute roleund (oder fügt diese automatisch hinzu). Autoren müssen diese spezifischeren Attribute selbst hinzufügen.aria-

Bootstrap fügt jedoch integrierte Unterstützung für die meisten standardmäßigen Tastaturmenüinteraktionen hinzu, z. B. die Möglichkeit, sich .dropdown-itemmit den Cursortasten durch einzelne Elemente zu bewegen und das Menü mit der ESCTaste zu schließen.

Beispiele

Umschließen Sie den Umschalter des Dropdown-Menüs (Ihre Schaltfläche oder Ihren Link) und das Dropdown-Menü .dropdownmit oder einem anderen Element, das deklariert position: relative;. Dropdowns können von <a>oder <button>Elementen ausgelöst werden, um Ihren potenziellen Anforderungen besser gerecht zu werden. Die hier gezeigten Beispiele verwenden <ul>gegebenenfalls semantische Elemente, aber benutzerdefiniertes Markup wird unterstützt.

Einzelne Taste

Jede Single .btnkann mit einigen Markup-Änderungen in einen Dropdown-Schalter umgewandelt werden. So können Sie sie mit beiden <button>Elementen verwenden:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>

Und mit <a>Elementen:

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>

Das Beste daran ist, dass Sie dies auch mit jeder Schaltflächenvariante tun können:

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

Erstellen Sie auf ähnliche Weise Dropdown-Listen mit geteilten Schaltflächen mit praktisch demselben Markup wie Dropdown-Listen mit einer Schaltfläche, jedoch mit dem Zusatz von .dropdown-toggle-splitfür den richtigen Abstand um das Dropdown-Cursor.

Wir verwenden diese zusätzliche Klasse, um die Horizontale paddingauf beiden Seiten des Caret-Zeichens um 25 % zu reduzieren und die margin-leftfür normale Schaltflächen-Dropdowns hinzugefügte zu entfernen. Diese zusätzlichen Änderungen sorgen dafür, dass das Caretzeichen in der Split-Taste zentriert bleibt, und bieten neben der Haupttaste einen Trefferbereich mit besserer Größe.

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

Dimensionierung

Schaltflächen-Dropdowns funktionieren mit Schaltflächen aller Größen, einschließlich standardmäßiger und geteilter Dropdown-Schaltflächen.

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

Dunkle Dropdowns

Entscheiden Sie sich für dunklere Dropdowns, um sie an eine dunkle Navigationsleiste oder einen benutzerdefinierten Stil anzupassen, indem Sie sie zu .dropdown-menu-darkeiner vorhandenen hinzufügen .dropdown-menu. An den Dropdown-Elementen sind keine Änderungen erforderlich.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <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>

Und es in einer Navigationsleiste verwenden:

<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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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>

Richtungen

RTL

Bei Verwendung von Bootstrap in RTL werden die Richtungen gespiegelt, die Bedeutung .dropstartwird auf der rechten Seite angezeigt.

Herunterfallen

Auslösen von Dropdown-Menüs über Elementen durch Hinzufügen .dropupzum übergeordneten 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>

Dropright

Auslösen von Dropdown-Menüs rechts neben den Elementen durch Hinzufügen .dropendzum übergeordneten 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">
    Dropright
  </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 Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Droplinks

Auslösen von Dropdown-Menüs links neben den Elementen durch Hinzufügen .dropstartzum übergeordneten 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">
  <div class="btn-group dropstart" role="group">
    <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>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Sie können <a>oder <button>Elemente als Dropdown-Elemente verwenden.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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>

Sie können auch nicht interaktive Dropdown-Elemente mit erstellen .dropdown-item-text. Fühlen Sie sich frei, mit benutzerdefinierten CSS- oder Textdienstprogrammen weiter zu gestalten.

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

Aktiv

.activeZu Elementen in der Dropdown -Liste hinzufügen , um sie als aktiv zu gestalten . Um den aktiven Zustand an Hilfstechnologien zu übermitteln, verwenden Sie das aria-currentAttribut – mit dem pageWert für die aktuelle Seite oder truefür das aktuelle Element in einem Satz.

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

Deaktiviert

.disabledZu Elementen in der Dropdown -Liste hinzufügen , um sie als deaktiviert zu gestalten .

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

Standardmäßig wird ein Dropdown-Menü automatisch 100 % von oben und entlang der linken Seite seines übergeordneten Elements positioniert. Sie können dies mit den Richtungsklassen ändern .drop*, aber Sie können sie auch mit zusätzlichen Modifikatorklassen steuern.

Fügen Sie .dropdown-menu-endzu a .dropdown-menuhinzu, um das Dropdown-Menü rechts auszurichten. Bei Verwendung von Bootstrap in RTL werden die Wegbeschreibungen gespiegelt, die Bedeutung .dropdown-menu-endwird auf der linken Seite angezeigt.

Kopf hoch! Dropdowns werden dank Popper positioniert, außer wenn sie in einer Navigationsleiste enthalten sind.

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

Reaktionsschnelle Ausrichtung

Wenn Sie die responsive Ausrichtung verwenden möchten, deaktivieren Sie die dynamische Positionierung, indem Sie das data-bs-display="static"Attribut hinzufügen, und verwenden Sie die responsiven Variationsklassen.

Um das Dropdown-Menü rechts.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end am angegebenen Haltepunkt oder größer auszurichten, fügen Sie hinzu .

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

Um das Dropdown-Menü links.dropdown-menu-end am angegebenen Haltepunkt oder größer auszurichten, fügen Sie und hinzu .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

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

Beachten Sie, dass Sie data-bs-display="static"den Dropdown-Schaltflächen in Navigationsleisten kein Attribut hinzufügen müssen, da Popper in Navigationsleisten nicht verwendet wird.

Ausrichtungsoptionen

Unter Berücksichtigung der meisten der oben gezeigten Optionen finden Sie hier eine kleine Küchenspülen-Demo mit verschiedenen Dropdown-Ausrichtungsoptionen an einem Ort.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

Überschriften

Fügen Sie eine Kopfzeile hinzu, um Aktionsabschnitte in einem beliebigen Dropdown-Menü zu kennzeichnen.

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

Teiler

Trennen Sie Gruppen zusammengehöriger Menüpunkte mit einer Trennlinie.

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

Text

Platzieren Sie beliebigen Freiformtext in einem Dropdown-Menü mit Text und verwenden Sie Abstandshilfsmittel . Beachten Sie, dass Sie wahrscheinlich zusätzliche Größenstile benötigen, um die Menübreite einzuschränken.

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

Formen

Fügen Sie ein Formular in ein Dropdown-Menü ein oder machen Sie es zu einem Dropdown-Menü und verwenden Sie Rand- oder Auffüll- Dienstprogramme , um ihm den erforderlichen negativen Raum zu geben.

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

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

Verwenden Sie data-bs-offsetoder data-bs-reference, um die Position des Dropdown-Menüs zu ändern.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>

Verhalten beim automatischen Schließen

Standardmäßig wird das Dropdown-Menü geschlossen, wenn Sie innerhalb oder außerhalb des Dropdown-Menüs klicken. Sie können die autoCloseOption verwenden, um dieses Verhalten des Dropdowns zu ändern.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

Sass

Variablen

Variablen für 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:             rgba($black, .15);
$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($gray-900, 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:           $dropdown-padding-y $dropdown-item-padding-x;

Variablen für das dunkle 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;

Variablen für die CSS-basierten Carets, die die Interaktivität eines Dropdowns angeben:

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

Mixins

Mixins werden zum Generieren der CSS-basierten Carets verwendet und befinden sich 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;
    }
  }
}

Verwendungszweck

Über Datenattribute oder JavaScript schaltet das Dropdown-Plugin versteckte Inhalte (Dropdown-Menüs) um, indem es die .showKlasse auf der übergeordneten .dropdown-menu. Das data-bs-toggle="dropdown"Attribut wird zum Schließen von Dropdown-Menüs auf Anwendungsebene verwendet, daher ist es eine gute Idee, es immer zu verwenden.

Auf touchfähigen Geräten werden durch das Öffnen eines Dropdowns leere mouseoverHandler zu den unmittelbar untergeordneten Elementen des <body>Elements hinzugefügt. Dieser zugegebenermaßen hässliche Hack ist notwendig, um eine Macke in der Ereignisdelegierung von iOS zu umgehen, die ansonsten verhindern würde, dass ein Tippen irgendwo außerhalb des Dropdowns den Code auslöst, der das Dropdown schließt. Sobald das Dropdown geschlossen wird, werden diese zusätzlichen leeren mouseoverHandler entfernt.

Über Datenattribute

Zu einem Link oder einer Schaltfläche hinzufügen data-bs-toggle="dropdown", um ein Dropdown-Menü umzuschalten.

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

Über JavaScript

Rufen Sie die Dropdowns über JavaScript auf:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

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

Unabhängig davon, ob Sie Ihr Dropdown über JavaScript aufrufen oder stattdessen die Daten-API verwenden, muss data-bs-toggle="dropdown"es immer auf dem Trigger-Element des Dropdowns vorhanden sein.

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-bs-, wie in data-bs-offset="". Stellen Sie sicher, dass Sie den Falltyp des Optionsnamens von camelCase in kebab-case ändern, wenn Sie die Optionen über Datenattribute übergeben. data-bs-autoClose="false"Verwenden Sie beispielsweise anstelle von data-bs-auto-close="false".

Name	Typ	Standard	Beschreibung
`boundary`	Zeichenfolge \| Element	`'clippingParents'`	Beschränkungsgrenze für Überlauf des Dropdown-Menüs (gilt nur für Poppers Modifikator "preventOverflow"). Standardmäßig ist es `'clippingParents'`und kann eine HTMLElement-Referenz akzeptieren (nur über JavaScript). Weitere Informationen finden Sie in der detectOverflow -Dokumentation von Popper .
`reference`	Zeichenfolge \| Element \| Objekt	`'toggle'`	Bezugselement des Dropdown-Menüs. Akzeptiert die Werte von `'toggle'`, `'parent'`, einer HTMLElement-Referenz oder einem Objekt, das `getBoundingClientRect`. Weitere Informationen finden Sie in Poppers Konstruktordokumentation und Dokumentation zu virtuellen Elementen .
`display`	Schnur	`'dynamic'`	Standardmäßig verwenden wir Popper für die dynamische Positionierung. Deaktivieren Sie dies mit `static`.
`offset`	Reihe \| Zeichenfolge \| Funktion	`[0, 2]`	Offset des Dropdowns relativ zu seinem Ziel. Sie können eine Zeichenfolge in Datenattributen mit kommagetrennten Werten wie folgt übergeben:`data-bs-offset="10,20"` Wenn eine Funktion verwendet wird, um den Offset zu bestimmen, wird sie mit einem Objekt aufgerufen, das die Popper-Platzierung, die Referenz und die Popper-Rects als erstes Argument enthält. Als zweites Argument wird das auslösende Element DOM node übergeben. Die Funktion muss ein Array mit zwei Zahlen zurückgeben: .`[skidding, distance]` Weitere Informationen finden Sie in der Offset -Dokumentation von Popper .
`autoClose`	boolesch \| Schnur	`true`	Konfigurieren Sie das automatische Schließen des Dropdown-Menüs: `true`- Das Dropdown-Menü wird geschlossen, indem Sie außerhalb oder innerhalb des Dropdown-Menüs klicken. `false`- Das Dropdown-Menü wird geschlossen, indem Sie auf die Umschaltfläche klicken und die Methode `hide`oder manuell aufrufen. `toggle`(Wird auch nicht durch Drücken der `esc`Taste geschlossen) `'inside'`- Das Dropdown-Menü wird (nur) durch Klicken in das Dropdown-Menü geschlossen. `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
`popperConfig`	null \| object \| function	`null`	To change Bootstrap's default Popper config, see Popper's configuration. When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.

Using function with `popperConfig`

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

Methods

Method	Description
`toggle`	Toggles the dropdown menu of a given navbar or tabbed navigation.
`show`	Shows the dropdown menu of a given navbar or tabbed navigation.
`hide`	Hides the dropdown menu of a given navbar or tabbed navigation.
`update`	Updates the position of an element's dropdown.
`dispose`	Destroys an element's dropdown. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`

Events

All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the .dropdown-menu’s parent element. hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original Event type is click) that contains an Event Object for the click event.

Method	Description
`show.bs.dropdown`	Fires immediately when the show instance method is called.
`shown.bs.dropdown`	Fired when the dropdown has been made visible to the user and CSS transitions have completed.
`hide.bs.dropdown`	Wird sofort ausgelöst, wenn die Methode zum Ausblenden der Instanz aufgerufen wurde.
`hidden.bs.dropdown`	Wird ausgelöst, wenn das Dropdown-Menü vollständig vor dem Benutzer ausgeblendet wurde und die CSS-Übergänge abgeschlossen sind.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

Dropdowns

Überblick

Barrierefreiheit

Beispiele

Einzelne Taste

Split-Taste

Dimensionierung

Dunkle Dropdowns

Richtungen

RTL

Herunterfallen

Dropright

Droplinks

Menüpunkte

Aktiv

Deaktiviert

Menüausrichtung

Reaktionsschnelle Ausrichtung

Ausrichtungsoptionen

Menüinhalt

Überschriften

Teiler

Text

Formen

Verhalten beim automatischen Schließen

Sass

Variablen

Mixins

Verwendungszweck

Über Datenattribute

Über JavaScript

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

Optionen

Using function with `popperConfig`

Methods

Events

Dropdowns

Überblick

Barrierefreiheit

Beispiele

Einzelne Taste

Split-Taste

Dimensionierung

Dunkle Dropdowns

Richtungen

RTL

Herunterfallen

Dropright

Droplinks

Menüpunkte

Aktiv

Deaktiviert

Menüausrichtung

Reaktionsschnelle Ausrichtung

Ausrichtungsoptionen

Menüinhalt

Überschriften

Dropdown-Kopfzeile

Teiler

Text

Formen

Dropdown-Optionen

Verhalten beim automatischen Schließen

Sass

Variablen

Mixins

Verwendungszweck

Über Datenattribute

Über JavaScript

data-bs-toggle="dropdown"noch erforderlich

Optionen

Using function with popperConfig

Methods

Events

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

Using function with `popperConfig`