Dropdowns

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

Ö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 tredje parts bibliotek, Popper.js , 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.js. Popper.js används inte för att placera rullgardinsmenyer i navigeringsfält men eftersom dynamisk positionering inte krävs.

Om du bygger vårt JavaScript från källan kräverutil.js det .

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.

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:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Och med <a>element:

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

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Det bästa är att du också 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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Split-knapp

På liknande 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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Vägbeskrivning

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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

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

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

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

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Historiskt sett måste innehållet i rullgardinsmenyn vara länkar, men det är inte längre fallet med v4. Nu kan du valfritt använda <button>element i dina rullgardinsmenyer istället för bara <a>s.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

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

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

Aktiva

Lägg .activetill objekt i rullgardinsmenyn för att utforma dem som aktiva .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Inaktiverad

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

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

Som standard placeras en rullgardinsmeny automatiskt 100 % uppifrån och längs den vänstra sidan av sin förälder. Lägg .dropdown-menu-righttill .dropdown-menuhögerjustera rullgardinsmenyn.

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

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Responsiv anpassning

Om du vill använda responsiv justering, inaktivera dynamisk positionering genom att lägga till data-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}-right.

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

För att anpassa rullgardinsmenyn till vänster.dropdown-menu-right med den givna brytpunkten eller större, lägg till och .dropdown-menu{-sm|-md|-lg|-xl}-left.

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

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

Rubriker

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

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

Avdelare

Separera grupper av relaterade menyalternativ med en avdelare.

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

Text

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

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

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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>

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

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Användande

Via dataattribut eller JavaScript växlar rullgardinspluginen dolt innehåll (rullgardinsmenyer) genom att växla .showklassen på det överordnade listobjektet. Attributet data-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 ( $.noop) mouseoverhanterare genom att öppna en rullgardinsmeny till elementets omedelbara <body>underordnade. 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 tas dessa ytterligare tomma mouseoverhanterare bort.

Via dataattribut

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

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

Via JavaScript

Ring rullgardinsmenyn via JavaScript:

$('.dropdown-toggle').dropdown()

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

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-offset="".

namn	Typ	Standard	Beskrivning
offset	nummer \| sträng \| fungera	0	Förskjutning av rullgardinsmenyn i förhållande till dess mål. När en funktion används för att bestämma offset, anropas den med ett objekt som innehåller offsetdata som dess första argument. Funktionen måste returnera ett objekt med samma struktur. Det utlösande elementets DOM-nod skickas som det andra argumentet. För mer information se Popper.js offset -dokument .
flip	booleskt	Sann	Tillåt Dropdown att vända om referenselementet överlappar. För mer information se Popper.js flip docs .
gräns	sträng \| element	'scrollParent'	Översvämningsbegränsningsgräns för rullgardinsmenyn. Accepterar värdena för `'viewport'`, `'window'`, `'scrollParent'`eller en HTMLElement-referens (endast JavaScript). För mer information se Popper.js preventOverflow -dokument .
referens	sträng \| element	"växla"	Referenselement i rullgardinsmenyn. Accepterar värdena för `'toggle'`, `'parent'`, eller en HTMLElement-referens. För mer information, se Popper.js's referenceObject docs .
visa	sträng	'dynamisk'	Som standard använder vi Popper.js för dynamisk positionering. Inaktivera detta med `static`.

Observera att när boundaryär inställt på något annat värde än , tillämpas 'scrollParent'stilen på behållaren.position: static.dropdown

Metoder

Metod	Beskrivning
`$().dropdown('toggle')`	Växlar rullgardinsmenyn för ett givet navigeringsfält eller navigering med flikar.
`$().dropdown('show')`	Visar rullgardinsmenyn för ett givet navigeringsfält eller navigering med flikar.
`$().dropdown('hide')`	Döljer rullgardinsmenyn för ett givet navigeringsfält eller navigering med flikar.
`$().dropdown('update')`	Uppdaterar positionen för ett elements rullgardinsmeny.
`$().dropdown('dispose')`	Förstör ett elements rullgardinsmeny.

evenemang

Alla rullgardinshändelser utlöses på .dropdown-menu's överordnade element och har en relatedTargetegenskap, vars värde är det växlande ankarelementet. 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.

Händelse	Beskrivning
`show.bs.dropdown`	Den här händelsen aktiveras omedelbart när metoden show-instans anropas.
`shown.bs.dropdown`	Den här händelsen aktiveras när rullgardinsmenyn har gjorts synlig för användaren (väntar på att CSS-övergångar ska slutföras).
`hide.bs.dropdown`	Denna händelse utlöses omedelbart när metoden hide instans har anropats.
`hidden.bs.dropdown`	Den här händelsen aktiveras när rullgardinsmenyn har döljs för användaren (väntar på att CSS-övergångar ska slutföras).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

Dropdowns

Översikt

Tillgänglighet

Exempel

Enkel knapp

Split-knapp

Dimensionering

Vägbeskrivning

Dropup

Dropright

Dropleft

Menyval

Aktiva

Inaktiverad

Menyjustering

Responsiv anpassning

Menyinnehåll

Rubriker

Avdelare

Text

Blanketter

Användande

Via dataattribut

Via JavaScript

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

alternativ

Metoder

evenemang

Dropdowns

Översikt

Tillgänglighet

Exempel

Enkel knapp

Split-knapp

Dimensionering

Vägbeskrivning

Dropup

Dropright

Dropleft

Menyval

Aktiva

Inaktiverad

Menyjustering

Responsiv anpassning

Menyinnehåll

Rubriker

Dropdown-huvud

Avdelare

Text

Blanketter

Alternativ för rullgardinsmeny

Användande

Via dataattribut

Via JavaScript

data-toggle="dropdown"fortfarande krävs

alternativ

Metoder

evenemang

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