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:

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>

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

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.

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>

Und es in einer Navigationsleiste verwenden:

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>

Richtungen

RTL

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

Zentriert

Machen Sie das Dropdown-Menü zentriert unter dem Umschalter mit .dropdown-centerauf dem übergeordneten 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>

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>

Dropup zentriert

Machen Sie das Dropdown-Menü zentriert über dem Umschalter mit .dropup-centerauf dem übergeordneten 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

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

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

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

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>

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.

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>

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.

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>

Deaktiviert

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

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>

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.

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>

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 .

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>

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.

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>

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.

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>

Überschriften

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

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>

Teiler

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

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>

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.

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>

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.

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>

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

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>

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.

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

Variablen

Hinzugefügt in v5.2.0

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwenden Dropdowns jetzt lokale CSS-Variablen .dropdown-menufür eine verbesserte Echtzeit-Anpassung. Die Werte für die CSS-Variablen werden über Sass festgelegt, sodass die Sass-Anpassung auch weiterhin unterstützt wird.

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

Die Anpassung durch CSS-Variablen ist in der Klasse zu sehen , in der .dropdown-menu-darkwir bestimmte Werte überschreiben, ohne doppelte CSS-Selektoren hinzuzufügen.

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

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

Über JavaScript

Rufen Sie die Dropdowns über JavaScript auf:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => 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

Da Optionen über Datenattribute oder JavaScript übergeben werden können, können Sie einen Optionsnamen data-bs-wie in anhängen data-bs-animation="{value}". Stellen Sie sicher, dass Sie den Falltyp des Optionsnamens von " camelCase " in " kebab -case " ändern, wenn Sie die Optionen über Datenattribute übergeben. Verwenden Sie beispielsweise data-bs-custom-class="beautifier"anstelle von data-bs-customClass="beautifier".

Ab Bootstrap 5.2.0 unterstützen alle Komponenten ein experimentelles reserviertes Datenattribut, das eine data-bs-configeinfache Komponentenkonfiguration als JSON-String enthalten kann. Wenn ein Element über data-bs-config='{"delay":0, "title":123}'und data-bs-title="456"-Attribute verfügt, ist der endgültige titleWert 456und die separaten Datenattribute überschreiben die auf angegebenen Werte data-bs-config. Darüber hinaus können vorhandene Datenattribute JSON-Werte wie data-bs-delay='{"show":0,"hide":150}'.

Name	Typ	Standard	Beschreibung
`autoClose`	boolesch, Zeichenfolge	`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'`- Das Dropdown-Menü wird (nur) durch Klicken außerhalb des Dropdown-Menüs geschlossen. Hinweis: Das Dropdown kann immer mit der `ESC`Taste geschlossen werden.
`boundary`	Zeichenkette, 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 .
`display`	Schnur	`'dynamic'`	Standardmäßig verwenden wir Popper für die dynamische Positionierung. Deaktivieren Sie dies mit `static`.
`offset`	Array, Zeichenfolge, Funktion	`[0, 2]`	Offset des Dropdowns relativ zu seinem Ziel. Sie können eine Zeichenfolge in Datenattributen mit kommagetrennten Werten übergeben, wie z. B.: `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 .
`popperConfig`	null, Objekt, Funktion	`null`	Um die standardmäßige Popper-Konfiguration von Bootstrap zu ändern, siehe Poppers Konfiguration . Wenn eine Funktion zum Erstellen der Popper-Konfiguration verwendet wird, wird sie mit einem Objekt aufgerufen, das die Standard-Popper-Konfiguration von Bootstrap enthält. Es hilft Ihnen, die Standardeinstellung mit Ihrer eigenen Konfiguration zu verwenden und zusammenzuführen. Die Funktion muss ein Konfigurationsobjekt für Popper zurückgeben.
`reference`	Zeichenkette, 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 .

Verwenden der Funktion mit`popperConfig`

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

Methoden

Methode	Beschreibung
`dispose`	Zerstört das Dropdown eines Elements. (Entfernt gespeicherte Daten auf dem DOM-Element)
`getInstance`	Statische Methode, mit der Sie die einem DOM-Element zugeordnete Dropdown-Instanz abrufen können. Sie können sie wie folgt verwenden: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statische Methode, die eine Dropdown-Instanz zurückgibt, die einem DOM-Element zugeordnet ist, oder eine neue erstellt, falls sie nicht initialisiert wurde. Sie können es wie folgt verwenden: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Blendet das Dropdown-Menü einer bestimmten Navigationsleiste oder Registerkartennavigation aus.
`show`	Zeigt das Dropdown-Menü einer bestimmten Navigationsleiste oder Registerkartennavigation an.
`toggle`	Schaltet das Dropdown-Menü einer bestimmten Navigationsleiste oder Registerkartennavigation um bzw. um.
`update`	Aktualisiert die Position der Dropdown-Liste eines Elements.

Veranstaltungen

Alle Dropdown-Ereignisse werden auf das Umschaltelement ausgelöst und dann nach oben gesprudelt. Sie können also auch Ereignis .dropdown-menu-Listener zum übergeordneten Element von hinzufügen. hide.bs.dropdownund hidden.bs.dropdownEreignisse haben eine clickEventEigenschaft (nur wenn der ursprüngliche Ereignistyp click) ist, die ein Ereignisobjekt für das Klickereignis enthält.

Ereignistyp	Beschreibung
`hide.bs.dropdown`	Wird sofort ausgelöst, wenn die `hide`Instanzmethode 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.
`show.bs.dropdown`	Wird sofort ausgelöst, wenn die `show`Instanzmethode aufgerufen wird.
`shown.bs.dropdown`	Wird ausgelöst, wenn das Dropdown-Menü für den Benutzer sichtbar gemacht wurde und die CSS-Übergänge abgeschlossen sind.

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

Dropdowns

Überblick

Barrierefreiheit

Beispiele

Einzelne Taste

Split-Taste

Dimensionierung

Dunkle Dropdowns

Richtungen

RTL

Zentriert

Herunterfallen

Dropup zentriert

Drop-End

Dropstart

Menüpunkte

Aktiv

Deaktiviert

Menüausrichtung

Reaktionsschnelle Ausrichtung

Ausrichtungsoptionen

Menüinhalt

Überschriften

Teiler

Text

Formen

Verhalten beim automatischen Schließen

CSS

Variablen

Sass-Variablen

Mixins

Verwendungszweck

Über Datenattribute

Über JavaScript

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

Optionen

Verwenden der Funktion mit`popperConfig`

Methoden

Veranstaltungen

Dropdowns

Überblick

Barrierefreiheit

Beispiele

Einzelne Taste

Split-Taste

Dimensionierung

Dunkle Dropdowns

Richtungen

RTL

Zentriert

Herunterfallen

Dropup zentriert

Drop-End

Dropstart

Menüpunkte

Aktiv

Deaktiviert

Menüausrichtung

Reaktionsschnelle Ausrichtung

Ausrichtungsoptionen

Menüinhalt

Überschriften

Dropdown-Kopfzeile

Teiler

Text

Formen

Dropdown-Optionen

Verhalten beim automatischen Schließen

CSS

Variablen

Sass-Variablen

Mixins

Verwendungszweck

Über Datenattribute

Über JavaScript

data-bs-toggle="dropdown"noch erforderlich

Optionen

Verwenden der Funktion mitpopperConfig

Methoden

Veranstaltungen

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

Verwenden der Funktion mit`popperConfig`