Dropdowns

Växla kontextuella överlagringar för att visa listor med länkar och mer med rullgardinsprogrammet Bootstrap.

På den här sidan

Översikt

Rullgardinsmenyer är växlingsbara, kontextuella överlagringar för att visa listor med länkar och mer. De görs interaktiva med den medföljande Bootstrap dropdown JavaScript-plugin. De växlas genom att klicka, inte genom att sväva; detta är ett avsiktligt designbeslut .

Dropdowns är byggda på ett tredjepartsbibliotek, Popper , som ger dynamisk positionering och visningsportdetektering. Se till att inkludera popper.min.js före Bootstraps JavaScript eller använd bootstrap.bundle.min.js/ bootstrap.bundle.jssom innehåller Popper. Popper används inte för att placera rullgardinsmenyn i navigeringsfält men eftersom dynamisk positionering inte krävs.

Tillgänglighet

WAI ARIA - standarden definierar en faktisk widget , men den är specifik för programliknande menyer som utlöser åtgärder eller funktioner. ARIA- menyer kan bara innehålla menyalternativ, kryssrutemenyalternativ, alternativknappsmenyalternativ, alternativknappsgrupper och undermenyer.role="menu"

Bootstraps rullgardinsmenyer, å andra sidan, är designade för att vara generiska och tillämpliga på en mängd olika situationer och uppmärkningsstrukturer. Det är till exempel möjligt att skapa rullgardinsmenyer som innehåller ytterligare inmatningar och formulärkontroller, såsom sökfält eller inloggningsformulär. Av denna anledning förväntar sig Bootstrap inte (eller lägger inte till automatiskt) något av attributen roleoch aria-som krävs för äkta ARIA- menyer. Författare måste själva inkludera dessa mer specifika attribut.

Bootstrap lägger dock till inbyggt stöd för de flesta vanliga tangentbordsmenyinteraktioner, såsom möjligheten att flytta genom enskilda .dropdown-itemelement med hjälp av markörtangenterna och stänga menyn med ESCtangenten.

Exempel

Slå in rullgardinsmenyn (din knapp eller länk) och rullgardinsmenyn inom .dropdown, eller ett annat element som deklarerar position: relative;. Dropdowns kan triggas från <a>eller <button>element för att bättre passa dina potentiella behov. Exemplen som visas här använder semantiska <ul>element där så är lämpligt, men anpassad uppmärkning stöds.

Enkel knapp

Vilken som helst .btnkan omvandlas till en rullgardinsmeny med några uppmärkningsändringar. Så här kan du få dem att fungera med båda <button>elementen:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Och med <a>element:

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>

Det bästa är att du kan göra detta med vilken knappvariant som helst:

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

På samma sätt, skapa rullgardinsmenyn för delade knappar med praktiskt taget samma markering som rullgardinsmenyn för en enda knapp, men med tillägg av .dropdown-toggle-splitför korrekt avstånd runt rullgardinsmenyn.

Vi använder den här extra klassen för att minska det horisontella paddingpå vardera sidan av fältet med 25 % och ta bort det margin-leftsom har lagts till för vanliga knapprullgardinsmenyer. De extra ändringarna håller fältet centrerat i den delade knappen och ger ett mer passande träffområde bredvid huvudknappen.

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

Dimensionering

Rullgardinsknappar fungerar med knappar av alla storlekar, inklusive standardknappar och delade rullgardinsknappar.

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

Mörka rullgardinsmenyer

Välj mörkare rullgardinsmenyer för att matcha en mörk navigeringsfält eller anpassad stil genom att lägga .dropdown-menu-darktill en befintlig .dropdown-menu. Inga ändringar krävs i rullgardinsmenyn.

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>

Och att använda den i en 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>

Vägbeskrivning

RTL

Vägbeskrivningarna speglas när du använder Bootstrap i RTL, vilket betyder .dropstartatt det visas på höger sida.

Centrerad

Gör rullgardinsmenyn centrerad under växlingen med .dropdown-centerpå det överordnade elementet.

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

Utlösa rullgardinsmenyer ovanför element genom att lägga .dropuptill i det överordnade elementet.

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

Gör rullgardinsmenyn centrerad ovanför växlingen med .dropup-centerpå det överordnade elementet.

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

Utlösa rullgardinsmenyer till höger om elementen genom att lägga .dropendtill i det överordnade elementet.

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

Utlösa rullgardinsmenyer till vänster om elementen genom att lägga .dropstarttill i det överordnade elementet.

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

Du kan använda <a>eller<button> element som rullgardinsobjekt.

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>

Du kan också skapa icke-interaktiva rullgardinsobjekt med .dropdown-item-text. Styla gärna ytterligare med anpassade CSS- eller textverktyg.

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>

Aktiva

Lägg .activetill objekt i rullgardinsmenyn för att utforma dem som aktiva . För att förmedla det aktiva tillståndet till hjälpmedelstekniker, använd aria-currentattributet — med pagevärdet för den aktuella sidan eller trueför det aktuella föremålet i en uppsättning.

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>

Inaktiverad

Lägg .disabledtill objekt i rullgardinsmenyn för att utforma dem som inaktiverade .

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>

Som standard placeras en rullgardinsmeny automatiskt 100 % uppifrån och längs den vänstra sidan av sin förälder. Du kan ändra detta med riktningsklasserna .drop*, men du kan också styra dem med ytterligare modifieringsklasser.

Lägg .dropdown-menu-endtill .dropdown-menuhögerjustera rullgardinsmenyn. Vägbeskrivningarna speglas när du använder Bootstrap i RTL, alltså.dropdown-menu-end att det visas på vänster sida.

Se upp! Dropdown-menyn placeras tack vare Popper förutom när de finns i en navigeringsfält.

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>

Responsiv anpassning

Om du vill använda responsiv justering, inaktivera dynamisk positionering genom att lägga tilldata-bs-display="static" attributet och använd de responsiva variantklasserna.

Lägg till för att justera rullgardinsmenyn till höger med den givna brytpunkten eller större .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>

För att anpassa rullgardinsmenyn till vänster.dropdown-menu-end med den givna brytpunkten eller större, lägg till och .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>

Observera att du inte behöver lägga till ett data-bs-display="static"attribut till rullgardinsknappar i navbarer, eftersom Popper inte används i navbarer.

Justeringsalternativ

Med de flesta av alternativen som visas ovan, här är en liten diskbänksdemo av olika rullgardinsalternativ på ett ställe.

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>

Rubriker

Lägg till en rubrik för att markera avsnitt av åtgärder i valfri rullgardinsmeny.

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>

Avdelare

Separera grupper av relaterade menyalternativ med en avdelare.

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

Placera valfri text i en rullgardinsmeny med text och använd mellanslagsverktyg . Observera att du sannolikt kommer att behöva ytterligare storleksstilar för att begränsa menyns bredd.

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>

Blanketter

Lägg ett formulär i en rullgardinsmeny, eller gör det till en rullgardinsmeny, och använd marginal- eller utfyllnadsverktyg för att ge det det negativa utrymme du behöver.

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>

Använd data-bs-offseteller data-bs-referenceför att ändra placeringen av rullgardinsmenyn.

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>

Autostängningsbeteende

Som standard stängs rullgardinsmenyn när du klickar i eller utanför rullgardinsmenyn. Du kan använda autoClosealternativet för att ändra detta beteende i rullgardinsmenyn.

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

Variabler

Lades till i v5.2.0

Som en del av Bootstraps utvecklande CSS-variabler använder rullgardinsmenyn nu lokala CSS-variabler .dropdown-menuför förbättrad realtidsanpassning. Värden för CSS-variablerna ställs in via Sass, så Sass-anpassning stöds fortfarande också.

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

Anpassning genom CSS-variabler kan ses på .dropdown-menu-darkklassen där vi åsidosätter specifika värden utan att lägga till dubbla CSS-väljare.

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

Variabler för alla rullgardinsmenyer:

$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

Variabler för den mörka rullgardinsmenyn :

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

Variabler för de CSS-baserade carets som indikerar en rullgardinsmenys interaktivitet:

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

Mixins

Mixins används för att generera CSS-baserade carets och kan hittas i 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;
    }
  }
}

Användande

Via dataattribut eller JavaScript växlar rullgardinspluginen dolt innehåll (rullgardinsmenyer) genom att växla .showklassen på den överordnade .dropdown-menu. Attributet data-bs-toggle="dropdown"används för att stänga rullgardinsmenyer på applikationsnivå, så det är en bra idé att alltid använda det.

På beröringsaktiverade enheter lägger du till tomma mouseoverhanterare till <body>elementets omedelbara underordnade rullgardinsmeny. Detta visserligen fula hack är nödvändigt för att kringgå en egenhet i iOS händelsedelegering , som annars skulle förhindra att ett tryck någonstans utanför rullgardinsmenyn utlöser koden som stänger rullgardinsmenyn. När rullgardinsmenyn är stängd är dessa ytterligare tomma mouseover hanterare bort.

Via dataattribut

Lägg data-bs-toggle="dropdown"till en länk eller knapp för att växla en rullgardinsmeny.

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

Via JavaScript

Ring rullgardinsmenyn via JavaScript:

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

`data-bs-toggle="dropdown"`fortfarande krävs

Oavsett om du anropar din dropdown via JavaScript eller istället använder data-api, data-bs-toggle="dropdown"måste alltid finnas på dropdownens triggerelement.

alternativ

Eftersom alternativ kan skickas via dataattribut eller JavaScript kan du lägga till ett alternativnamn till data-bs-, som i data-bs-animation="{value}". Se till att ändra fallets typ av alternativnamnet från " camelCase " till " kebab-case " när du skickar alternativen via dataattribut. Använd till exempel data-bs-custom-class="beautifier"istället fördata-bs-customClass="beautifier" .

Från och med Bootstrap 5.2.0 stöder alla komponenter ett experimentellt reserverat dataattribut data-bs-configsom kan hysa enkel komponentkonfiguration som en JSON-sträng. När ett element har data-bs-config='{"delay":0, "title":123}'och data-bs-title="456"attribut kommer det slutliga titlevärdet att vara 456och de separata dataattributen kommer att åsidosätta värden som ges på data-bs-config. Dessutom kan befintliga dataattribut innehålla JSON-värden som data-bs-delay='{"show":0,"hide":150}'.

namn	Typ	Standard	Beskrivning
`autoClose`	boolean, sträng	`true`	Konfigurera rullgardinsmenyns beteende för automatisk stängning: `true`- rullgardinsmenyn stängs genom att klicka utanför eller inuti rullgardinsmenyn. `false`- rullgardinsmenyn stängs genom att klicka på växlingsknappen och manuellt anropa `hide`eller `toggle`metod. (Stängs inte heller genom att trycka på `esc`knappen) `'inside'`- rullgardinsmenyn stängs (endast) genom att klicka i rullgardinsmenyn. `'outside'`- rullgardinsmenyn stängs (endast) genom att klicka utanför rullgardinsmenyn. Obs: rullgardinsmenyn kan alltid stängas med `ESC`nyckeln.
`boundary`	sträng, element	`'clippingParents'`	Bräddningsbegränsningsgräns för rullgardinsmenyn (gäller endast för Poppers preventOverflow-modifierare). Som standard är det `clippingParents`och kan acceptera en HTMLElement-referens (endast via JavaScript). För mer information se Poppers detectOverflow -dokument .
`display`	sträng	`'dynamic'`	Som standard använder vi Popper för dynamisk positionering. Inaktivera detta med `static`.
`offset`	array, sträng, funktion	`[0, 2]`	Förskjutning av rullgardinsmenyn i förhållande till dess mål. Du kan skicka en sträng i dataattribut med kommaseparerade värden som: `data-bs-offset="10,20"`. När en funktion används för att bestämma offset, anropas den med ett objekt som innehåller popperplaceringen, referensen och popper rects som dess första argument. Det utlösande elementets DOM-nod skickas som det andra argumentet. Funktionen måste returnera en array med två siffror: sladd , avstånd . För mer information se Poppers offset -dokument .
`popperConfig`	null, objekt, funktion	`null`	För att ändra Bootstraps standard Popper-konfiguration, se Poppers konfiguration . När en funktion används för att skapa Popper-konfigurationen, anropas den med ett objekt som innehåller Bootstraps standard Popper-konfiguration. Det hjälper dig att använda och slå samman standarden med din egen konfiguration. Funktionen måste returnera ett konfigurationsobjekt för Popper.
`reference`	sträng, element, objekt	`'toggle'`	Referenselement i rullgardinsmenyn. Accepterar värdena för `'toggle'`, `'parent'`, en HTMLElement-referens eller ett objekt som tillhandahåller `getBoundingClientRect`. För mer information se Poppers konstruktordokument och virtuella elementdokument .

Använder funktion med`popperConfig`

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

Metoder

Metod	Beskrivning
`dispose`	Förstör ett elements rullgardinsmeny. (Tar bort lagrad data på DOM-elementet)
`getInstance`	Statisk metod som låter dig få rullgardinsinstansen kopplad till ett DOM-element, du kan använda den så här: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statisk metod som returnerar en rullgardinsinstans kopplad till ett DOM-element eller skapar en ny om den inte initierades. Du kan använda det så här: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Döljer rullgardinsmenyn för ett givet navigeringsfält eller navigering med flikar.
`show`	Visar rullgardinsmenyn för ett givet navigeringsfält eller navigering med flikar.
`toggle`	Växlar rullgardinsmenyn för ett givet navigeringsfält eller navigering med flikar.
`update`	Uppdaterar positionen för ett elements rullgardinsmeny.

evenemang

Alla rullgardinshändelser avfyras mot växlingselementet och bubblas sedan upp. Så du kan också lägga till händelseavlyssnare på .dropdown-menu's överordnade element. hide.bs.dropdownoch hidden.bs.dropdownhändelser har en clickEventegenskap (endast när den ursprungliga händelsetypen är click) som innehåller ett händelseobjekt för klickhändelsen.

Event typ	Beskrivning
`hide.bs.dropdown`	Avfyras omedelbart när `hide`instansmetoden har anropats.
`hidden.bs.dropdown`	Aktiveras när rullgardinsmenyn har döljts för användaren och CSS-övergångar har slutförts.
`show.bs.dropdown`	Avfyras omedelbart när `show`instansmetoden anropas.
`shown.bs.dropdown`	Aktiveras när rullgardinsmenyn har gjorts synlig för användaren och CSS-övergångar har slutförts.

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

Dropdowns

Översikt

Tillgänglighet

Exempel

Enkel knapp

Split-knapp

Dimensionering

Mörka rullgardinsmenyer

Vägbeskrivning

RTL

Centrerad

Dropup

Dropup centrerad

Dropend

Dropstart

Menyval

Aktiva

Inaktiverad

Menyjustering

Responsiv anpassning

Justeringsalternativ

Menyinnehåll

Rubriker

Avdelare

Text

Blanketter

Autostängningsbeteende

CSS

Variabler

Sass variabler

Mixins

Användande

Via dataattribut

Via JavaScript

`data-bs-toggle="dropdown"`fortfarande krävs

alternativ

Använder funktion med`popperConfig`

Metoder

evenemang

Dropdowns

Översikt

Tillgänglighet

Exempel

Enkel knapp

Split-knapp

Dimensionering

Mörka rullgardinsmenyer

Vägbeskrivning

RTL

Centrerad

Dropup

Dropup centrerad

Dropend

Dropstart

Menyval

Aktiva

Inaktiverad

Menyjustering

Responsiv anpassning

Justeringsalternativ

Menyinnehåll

Rubriker

Dropdown-huvud

Avdelare

Text

Blanketter

Alternativ för rullgardinsmeny

Autostängningsbeteende

CSS

Variabler

Sass variabler

Mixins

Användande

Via dataattribut

Via JavaScript

data-bs-toggle="dropdown"fortfarande krävs

alternativ

Använder funktion medpopperConfig

Metoder

evenemang

`data-bs-toggle="dropdown"`fortfarande krävs

Använder funktion med`popperConfig`