Dropdowns

Toggle kontextuell Iwwerlagerungen fir Lëschte vu Linken ze weisen a méi mam Bootstrap Dropdown Plugin.

Op dëser Säit

Iwwersiicht

Dropdowns sinn togglebar, kontextuell Iwwerlagerungen fir Lëschte vu Linken ze weisen a méi. Si ginn interaktiv gemaach mam abegraff Bootstrap Dropdown JavaScript Plugin. Si ginn duerch Klick gekippt, net duerch Schweef; dëst ass eng virsiichteg Designdecisioun .

Dropdowns ginn op enger Drëtt Partei Bibliothéik gebaut, Popper , déi dynamesch Positionéierung an Viewport Detektioun ubitt. Gitt sécher datt Dir Popper.min.js virum Bootstrap's JavaScript enthält oder benotzt bootstrap.bundle.min.js/ bootstrap.bundle.jsdéi Popper enthält. Popper gëtt net benotzt fir Dropdowns an Navbars ze positionéieren awer well dynamesch Positionéierung net erfuerderlech ass.

Accessibilitéit

De WAI ARIA Standard definéiert en aktuellen role="menu"Widget , awer dëst ass spezifesch fir Applikatiounsähnlech Menüen déi Aktiounen oder Funktiounen ausléisen. ARIA Menue kënnen nëmmen Menü Elementer enthalen, Checkbox Menü Elementer, Radio Button Menü Elementer, Radio Button Gruppen, an Ënnermenüen.

Dem Bootstrap seng Dropdowns, op der anerer Säit, sinn entwéckelt fir generesch ze sinn an applicabel op eng Vielfalt vu Situatiounen a Markupstrukturen. Zum Beispill ass et méiglech Dropdowns ze kreéieren déi zousätzlech Inputen a Formkontrolle enthalen, sou wéi Sichfelder oder Loginformen. Aus dësem Grond erwaart Bootstrap keng vun den rolean aria-Attributer déi fir richteg ARIA Menüen erfuerderlech sinn (och net automatesch derbäi). Autoren mussen dës méi spezifesch Attributer selwer enthalen.

Wéi och ëmmer, Bootstrap füügt gebaut-an Ënnerstëtzung fir déi meescht Standard Tastaturmenü Interaktiounen, sou wéi d'Fäegkeet fir duerch eenzel .dropdown-itemElementer mat de Cursorschlësselen ze bewegen an de Menü mat dem ESCSchlëssel zouzemaachen.

Beispiller

Wickelt den Dropdown-Taggle (Äre Knäppchen oder Link) an den Dropdown-Menü bannent .dropdown, oder en anert Element dat deklaréiert position: relative;. Dropdowns kënnen aus <a>oder <button>Elementer ausgeléist ginn fir Är potenziell Bedierfnesser besser ze passen. D'Beispiller hei gewisen benotzen semantesch <ul>Elementer wou passend, awer personaliséiert Markup gëtt ënnerstëtzt.

Single Knäppchen

All Single .btnkann an e Dropdown Toggle ëmgewandelt ginn mat e puer Markup Ännerungen. Hei ass wéi Dir se mat entweder <button>Elementer setzen kënnt:

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>

A mat <a>Elementer:

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>

Dee beschten Deel ass datt Dir dëst och mat all Knäppchenvariant maache kënnt:

<!-- 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 Knäppchen

Ähnlech erstellt Splitknäppchen Dropdowns mat quasi déiselwecht Markup wéi Single Button Dropdowns, awer mat der Zousatz vu .dropdown-toggle-splitfir richteg Abstand ronderëm den Dropdown Caret.

Mir benotzen dës extra Klass fir d'horizontal paddingop béide Säiten vun der caret ze reduzéieren mat 25% an ewechzehuelen déi margin-leftfir regelméisseg Knäppchen dropdowns dobäi ass. Déi extra Ännerunge behalen de Caret am Spaltknäppchen zentréiert a liwweren e méi passend Gréissten Hitgebitt nieft dem Haaptknäppchen.

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

Gréisst

Button Dropdowns funktionnéieren mat Knäppercher vun alle Gréissten, dorënner Standard a Split Dropdown Knäppercher.

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

Däischter Dropdowns

Wielt op méi däischter Dropdowns fir eng donkel Navbar oder personaliséierte Stil ze passen andeems Dir .dropdown-menu-darkop eng existent bäidréit .dropdown-menu. Keng Ännerunge fir den Dropdown-Element sinn erfuerderlech.

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>

A benotzt et an enger Navbar:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Richtungen

RTL.lu

D'Direktioune gi gespigelt wann Dir Bootstrap an RTL benotzt, dat .dropstartheescht op der rietser Säit erschéngen.

Zentréiert

Maacht den Dropdown-Menü zentréiert ënner dem Toggle mat .dropdown-centerdem Elterendeel.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup

Ausléiser Dropdown-Menüen iwwer Elementer andeems Dir .dropupdem Elterendeel bäidréit.

<!-- 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 zentréiert

Maacht den Dropup-Menü zentral iwwer dem Toggle mat .dropup-centerdem Elterendeel.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Ausléiser Dropdown-Menüen op der rietser Säit vun den Elementer andeems Dir .dropendop den Elterendeel bäidréit.

<!-- 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éiser Dropdown-Menüen op der lénker Säit vun den Elementer andeems Dir .dropstartdem Elterendeel bäidréit.

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

Dir kënnt <a>oder <button>Elementer als Dropdown-Elementer benotzen.

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>

Dir kënnt och net-interaktiven Dropdown-Elementer mat .dropdown-item-text. Fillt Iech gratis weider ze styléieren mat personaliséierten CSS oder Text Utilities.

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

Füügt .activeArtikelen am Dropdown -Menü fir se als aktiv ze stiléieren . Fir den aktiven Zoustand un Hëllefstechnologien ze vermëttelen, benotzt den aria-currentAttribut - benotzt de pageWäert fir déi aktuell Säit, oder truefir den aktuellen Artikel an engem Set.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Behënnert

Füügt .disabledun Artikelen am Dropdown fir se als behënnert ze stiléieren .

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>

Par défaut gëtt en Dropdown-Menü automatesch 100% vun uewen a laanscht déi lénks Säit vu sengem Elterendeel positionéiert. Dir kënnt dëst mat der Direktiounsklassen änneren .drop*, awer Dir kënnt se och mat zousätzleche Modifikatiounsklassen kontrolléieren.

Füügt .dropdown-menu-endop eng .dropdown-menuriets ausgeriicht den Dropdown-Menü. D'Direktioune gi gespigelt wann Dir Bootstrap an RTL benotzt, dat .dropdown-menu-endheescht op der lénker Säit erschéngen.

Kapp erop! Dropdowns si positionéiert dank Popper ausser wann se an enger Navbar enthale sinn.

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>

Reaktiounsfäeger Ausriichtung

Wann Dir reaktiounsfäeger Ausriichtung benotze wëllt, deaktivéiert dynamesch Positionéierung andeems Dir den data-bs-display="static"Attribut bäidréit a benotzt déi reaktiounsfäeg Variatiounsklassen.

Fir den Dropdown-Menü richteg auszegläichen mat dem gegebene Breakpunkt oder méi grouss, füügt .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Fir den Dropdown-Menü lénks mat dem gegebene Breakpunkt oder méi grouss auszegläichen, füügt .dropdown-menu-enda .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>

Bedenkt datt Dir keen data-bs-display="static"Attribut un Dropdown-Knäppercher an Navbars addéiere musst, well Popper net an Navbars benotzt gëtt.

Ausriichtung Optiounen

Huelt déi meescht vun den uewe gewisen Optiounen, hei ass eng kleng Kichen ënnerzegoen Demo vu verschiddenen Dropdown Ausriichtungsoptiounen op enger Plaz.

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>

Header

Füügt en Header fir Sektiounen vun Aktiounen an all Dropdown-Menü ze markéieren.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Dividers

Trennt Gruppe vu verwandte Menüartikele mat engem Trenndeel.

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

Plaz all freeform Text an engem Dropdown-Menü mat Text a benotzt Abstands-Utilities . Bedenkt datt Dir wahrscheinlech zousätzlech Gréisststiler braucht fir d'Menübreet ze beschrä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

Setzt e Formulaire an engem Dropdown-Menü, oder maacht et an en Dropdown-Menü, a benotzt Margin- oder Padding-Utilities fir et den negativen Raum ze ginn deen Dir braucht.

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>

Benotzt data-bs-offsetoder data-bs-referencefir d'Plaz vum Dropdown ze änneren.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Auto zoumaachen Verhalen

Par défaut ass den Dropdown-Menü zougemaach wann Dir bannen oder ausserhalb vum Dropdown-Menü klickt. Dir kënnt d' autoCloseOptioun benotzen fir dëst Verhalen vum Dropdown ze änneren.

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

Dobäi an v5.2.0

Als Deel vum Bootstrap senger evoluéierender CSS Variablen Approche benotzen Dropdowns elo lokal CSS Variablen op .dropdown-menufir eng verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

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

Personnalisatioun duerch CSS Variablen kann op der .dropdown-menu-darkKlass gesi ginn, wou mir spezifesch Wäerter iwwerschreiden ouni duplizéiert CSS Selektorer ze addéieren.

  --#{$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 fir all 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 fir den donkelen 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 fir d'CSS-baséiert Carets déi d'Interaktivitéit vun engem Dropdown uginn:

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

Mixins

Mixins gi benotzt fir d'CSS-baséiert Carets ze generéieren a kënnen an 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;
    }
  }
}

Benotzung

Iwwer Dateattributer oder JavaScript wiesselt den Dropdown-Plugin verstoppt Inhalt (Dropdown-Menüen) andeems d' .showKlass op den Elterendeel wiesselt .dropdown-menu. D' data-bs-toggle="dropdown"Attributer gëtt ugewisen fir Dropdown-Menüen op engem Applikatiounsniveau zouzemaachen, also ass et eng gutt Iddi et ëmmer ze benotzen.

Op Touch-aktivéierten Apparater, d'Ouverture vun engem Dropdown füügt eidel mouseoverHandler un déi direkt Kanner vum <body>Element. Dësen zouginn ellent Hack ass néideg fir ëm e Quirk an der iOS Event Delegatioun ze schaffen , wat soss verhënnert datt e Krunn iergendwou ausserhalb vum Dropdown de Code ausléist deen den Dropdown zoumaacht. Wann den Dropdown zougemaach ass, ginn dës zousätzlech eidel mouseoverHandler geläscht.

Via daten Attributer

Füügt data-bs-toggle="dropdown"e Link oder Knäppchen fir en Dropdown ze wiesselen.

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

Iwwer JavaScript

Rufft d'Dropdowns iwwer JavaScript un:

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

`data-bs-toggle="dropdown"`nach néideg

Egal ob Dir Ären Dropdown iwwer JavaScript nennt oder amplaz den Data-APi benotzt, data-bs-toggle="dropdown"ass ëmmer erfuerderlech um Ausléiserelement vum Dropdown präsent ze sinn.

Optiounen

Wéi Optiounen kënnen iwwer Dateattributer oder JavaScript weidergeleet ginn, kënnt Dir en Optiounsnumm op data-bs-, wéi an data-bs-animation="{value}". Vergewëssert Iech de Falltyp vum Optiounsnumm vun " camelCase " op " Kebab-Case " z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill benotzt data-bs-custom-class="beautifier"amplaz data-bs-customClass="beautifier".

Zënter Bootstrap 5.2.0 ënnerstëtzen all Komponenten en experimentellen reservéierten Dateattribut, data-bs-configdeen eng einfach Komponentkonfiguratioun als JSON-String kann ënnerhuelen. Wann en Element data-bs-config='{"delay":0, "title":123}'an data-bs-title="456"Attributer huet, gëtt de Finale titleWäert 456an déi getrennten Dateattributter iwwerschreiden Wäerter, déi op data-bs-config. Zousätzlech kënnen existent Datenattributer JSON Wäerter wéi data-bs-delay='{"show":0,"hide":150}'.

Numm	Typ	Default	Beschreiwung
`autoClose`	boolean, streng	`true`	Konfiguréiert den Auto Zoumaache Verhalen vum Dropdown: `true`- den Dropdown gëtt zougemaach andeems Dir dobaussen oder am Dropdown-Menü klickt. `false`- den Dropdown gëtt zougemaach andeems Dir op den Toggle Knäppchen klickt a manuell rufft `hide`oder `toggle`Method. (Och net zougemaach ginn andeems Dir op `esc`de Schlëssel dréckt) `'inside'`- den Dropdown gëtt zougemaach (nëmmen) andeems Dir am Dropdown-Menü klickt. `'outside'`- den Dropdown gëtt zougemaach (nëmmen) andeems Dir ausserhalb vum Dropdown-Menü klickt. Notiz: den Dropdown kann ëmmer mam `ESC`Schlëssel zougemaach ginn.
`boundary`	string, element	`'clippingParents'`	Overflow Constraint Grenz vum Dropdown-Menü (gëllt nëmme fir Popper's preventOverflow-Modifier). Par défaut ass et `clippingParents`a kann eng HTMLElement Referenz akzeptéieren (nëmmen iwwer JavaScript). Fir méi Informatioun kuckt op Popper's detectOverflow docs .
`display`	String	`'dynamic'`	Par défaut benotze mir Popper fir dynamesch Positionéierung. Desaktivéiere dëst mat `static`.
`offset`	Array, String, Funktioun	`[0, 2]`	Offset vum Dropdown relativ zu sengem Zil. Dir kënnt eng String an Datenattributer mat komma getrennte Wäerter passéieren wéi `data-bs-offset="10,20"`:. Wann eng Funktioun benotzt gëtt fir d'Offset ze bestëmmen, gëtt se mat engem Objet genannt deen d'Popperplazéierung enthält, d'Referenz, a Popper-Rects als éischt Argument. Den Ausléiserelement DOM Node gëtt als zweet Argument weidergeleet. D'Funktioun muss en Array mat zwou Zuelen zréckginn: Skidding , Distanz . Fir méi Informatioun kuckt op dem Popper seng Offset Docs .
`popperConfig`	null, Objet, Funktioun	`null`	Fir d'Standard Popper Configuratioun vum Bootstrap z'änneren, kuckt d' Popper Konfiguratioun . Wann eng Funktioun benotzt gëtt fir d'Popper Konfiguratioun ze kreéieren, gëtt se mat engem Objet genannt deen d'Standard Popper Konfiguratioun vum Bootstrap enthält. Et hëlleft Iech de Standard mat Ärer eegener Konfiguratioun ze benotzen an ze fusionéieren. D'Funktioun muss e Configuratiounsobjekt fir Popper zréckginn.
`reference`	String, Element, Objet	`'toggle'`	Referenzelement vum Dropdown-Menü. Akzeptéiert d'Wäerter vun `'toggle'`, `'parent'`, eng HTMLElement Referenz oder en Objet deen `getBoundingClientRect`. Fir méi Informatioun, kuckt op Popper's Konstruktordokumenter a virtuell Elementdokumenter .

Benotzt Funktioun mat`popperConfig`

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

Methoden

Method	Beschreiwung
`dispose`	Zerstéiert den Dropdown vun engem Element. (läscht gespäichert Daten am DOM Element)
`getInstance`	Statesch Method déi Iech erlaabt d'Dropdown-Instanz mat engem DOM-Element assoziéiert ze kréien, Dir kënnt et esou benotzen: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statesch Method déi eng Dropdown-Instanz zréckginn, déi mat engem DOM-Element assoziéiert ass oder en neit erstellt am Fall wou se net initialiséiert gouf. Dir kënnt et esou benotzen `bootstrap.Dropdown.getOrCreateInstance(element)`:.
`hide`	Verstoppt den Dropdown-Menü vun enger bestëmmter Navbar oder Tabbed Navigatioun.
`show`	Weist den Dropdown-Menü vun enger bestëmmter Navbar oder Tabbed Navigatioun.
`toggle`	Wiesselt den Dropdown-Menü vun enger bestëmmter Navbar oder Tabbed Navigatioun.
`update`	Aktualiséiert d'Positioun vun engem Element dropdown.

Evenementer

All Dropdown-Evenementer ginn op d'Toggling-Element gebrannt an dann opgeblosen. Also kënnt Dir och Eventnolauschterer am .dropdown-menuElterendeel addéieren. hide.bs.dropdownan hidden.bs.dropdownEvenementer hunn eng clickEventPropriétéit (nëmmen wann d'Original Event Typ ass click) déi enthält en Event Objet fir de Klick Event.

Event Typ	Beschreiwung
`hide.bs.dropdown`	Feiert direkt wann d' `hide`Instanzmethod genannt gouf.
`hidden.bs.dropdown`	Entlooss wann den Dropdown fäerdeg ass vum Benotzer verstoppt ze sinn an CSS Iwwergänge fäerdeg sinn.
`show.bs.dropdown`	Brennt direkt wann d' `show`Instanzmethod genannt gëtt.
`shown.bs.dropdown`	Entlooss wann den Dropdown fir de Benotzer siichtbar gemaach gouf an d'CSS Transitioune fäerdeg sinn.

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

Dropdowns

Iwwersiicht

Accessibilitéit

Beispiller

Single Knäppchen

Split Knäppchen

Gréisst

Däischter Dropdowns

Richtungen

RTL.lu

Zentréiert

Dropup

Dropup zentréiert

Dropend

Dropstart

Menu Elementer

Aktiv

Behënnert

Menu Ausrichtung

Reaktiounsfäeger Ausriichtung

Ausriichtung Optiounen

Menu Inhalt

Header

Dividers

Text

Formen

Auto zoumaachen Verhalen

CSS

Variablen

Sass Variablen

Mixins

Benotzung

Via daten Attributer

Iwwer JavaScript

`data-bs-toggle="dropdown"`nach néideg

Optiounen

Benotzt Funktioun mat`popperConfig`

Methoden

Evenementer

Dropdowns

Iwwersiicht

Accessibilitéit

Beispiller

Single Knäppchen

Split Knäppchen

Gréisst

Däischter Dropdowns

Richtungen

RTL.lu

Zentréiert

Dropup

Dropup zentréiert

Dropend

Dropstart

Menu Elementer

Aktiv

Behënnert

Menu Ausrichtung

Reaktiounsfäeger Ausriichtung

Ausriichtung Optiounen

Menu Inhalt

Header

Dropdown Header

Dividers

Text

Formen

Dropdown Optiounen

Auto zoumaachen Verhalen

CSS

Variablen

Sass Variablen

Mixins

Benotzung

Via daten Attributer

Iwwer JavaScript

data-bs-toggle="dropdown"nach néideg

Optiounen

Benotzt Funktioun matpopperConfig

Methoden

Evenementer

`data-bs-toggle="dropdown"`nach néideg

Benotzt Funktioun mat`popperConfig`