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.

En knapp rullgardinsmeny

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

Rullgardinsmenyer för dela knappar

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

Dropup variation

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

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 variation

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>

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>

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>

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>

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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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>

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="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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. För mer information se Popper.js offset -dokument .
flip	booleskt	Sann	Tillåt dropdown att vända i händelse av en överlappning på referenselementet. 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 .

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

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

En knapp rullgardinsmeny

Rullgardinsmenyer för dela knappar

Dimensionering

Dropup variation

Dropright-variation

Dropleft variation

Menyval

Menyjustering

Menyrubriker

Menyavdelare

Menyformulär

Aktiva menyalternativ

Inaktiverade menyalternativ

Användande

Via dataattribut

Via JavaScript

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

alternativ

Metoder

evenemang

Dropdowns

Översikt

Tillgänglighet

Exempel

En knapp rullgardinsmeny

Rullgardinsmenyer för dela knappar

Dimensionering

Dropup variation

Dropright-variation

Dropleft variation

Menyval

Menyjustering

Menyrubriker

Dropdown-huvud

Menyavdelare

Menyformulär

Aktiva menyalternativ

Inaktiverade menyalternativ

Användande

Via dataattribut

Via JavaScript

data-toggle="dropdown"fortfarande krävs

alternativ

Metoder

evenemang

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