Dropdowns

Skift kontekstuelle overlejringer for at vise lister over links og mere med Bootstrap dropdown-plugin'et.

På denne side

Oversigt

Dropdowns kan skiftes, kontekstuelle overlejringer til at vise lister over links og mere. De er gjort interaktive med det inkluderede Bootstrap dropdown JavaScript-plugin. De skiftes ved at klikke, ikke ved at svæve; dette er en bevidst designbeslutning .

Dropdowns er bygget på et tredjepartsbibliotek, Popper , som giver dynamisk positionering og visningsportdetektion. Sørg for at inkludere popper.min.js før Bootstraps JavaScript eller brug bootstrap.bundle.min.js/ bootstrap.bundle.jssom indeholder Popper. Popper bruges dog ikke til at placere dropdowns i navbarer, da dynamisk positionering ikke er påkrævet.

Tilgængelighed

WAI ARIA - standarden definerer en faktisk role="menu"widget , men denne er specifik for applikationslignende menuer, der udløser handlinger eller funktioner. ARIA -menuer kan kun indeholde menupunkter, afkrydsningsfelter, menupunkter, alternativknapgrupper og undermenuer.

Bootstraps dropdowns er på den anden side designet til at være generiske og anvendelige til en række forskellige situationer og markup-strukturer. For eksempel er det muligt at oprette dropdowns, der indeholder yderligere input og formularkontrolelementer, såsom søgefelter eller loginformularer. Af denne grund forventer Bootstrap ikke (heller ikke automatisk tilføje) nogen af attributterne roleog aria-, der kræves til ægte ARIA- menuer. Forfattere skal selv inkludere disse mere specifikke attributter.

Bootstrap tilføjer dog indbygget understøttelse af de fleste standard tastaturmenuinteraktioner, såsom muligheden for at bevæge sig gennem individuelle .dropdown-itemelementer ved hjælp af markørtasterne og lukke menuen med ESCtasten.

Eksempler

Ombryd rullemenuens til/fra-knap (din knap eller dit link) og rullemenuen i .dropdown, eller et andet element, der erklærer position: relative;. Dropdowns kan udløses fra <a>eller <button>elementer for bedre at passe til dine potentielle behov. Eksemplerne vist her bruger semantiske <ul>elementer, hvor det er relevant, men tilpasset markup understøttes.

Enkelt knap

Enhver enkelt .btnkan omdannes til en rullemenu med nogle markup-ændringer. Sådan kan du få dem til at fungere med begge <button>elementer:

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>

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

Det bedste er, at du også kan gøre dette med enhver knapvariant:

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

På samme måde kan du oprette rullemenuer med delte knap med stort set samme markering som rullemenuer med enkelt knap, men med tilføjelse af .dropdown-toggle-splitfor korrekt afstand omkring rullemenuen.

Vi bruger denne ekstra klasse til at reducere det vandrette paddingpå hver side af bjælken med 25 % og fjerne det margin-left, der er tilføjet til almindelige knap-dropdowns. Disse ekstra ændringer holder feltet centreret i splitknappen og giver et mere passende størrelse hitområde ved siden af hovedknappen.

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

Knaprullemenuer fungerer med knapper i alle størrelser, inklusive standard- og opdelte rullemenuknapper.

<!-- 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ørke dropdowns

Vælg mørkere rullemenuer for at matche en mørk navbar eller brugerdefineret stil ved at tilføje .dropdown-menu-darktil en eksisterende .dropdown-menu. Der kræves ingen ændringer i rullemenuen.

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>

Og at bruge det 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>

Vejbeskrivelse

RTL

Retninger spejles, når du bruger Bootstrap i RTL, hvilket betyder .dropstart, at det vises i højre side.

Centreret

Gør rullemenuen centreret under skiftet med .dropdown-centerpå det overordnede element.

html

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

Dropup

Udløs rullemenuer over elementer ved at tilføje .dropuptil det overordnede element.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropup centreret

Gør drop-up-menuen centreret over skiftet med .dropup-centerpå det overordnede element.

html

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

Dropend

Udløs rullemenuer til højre for elementerne ved at tilføje .dropendtil det overordnede element.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

Udløs rullemenuer til venstre for elementerne ved at tilføje .dropstarttil det overordnede element.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Du kan bruge <a>eller <button>elementer som dropdown-elementer.

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 også oprette ikke-interaktive dropdown-elementer med .dropdown-item-text. Du er velkommen til at style yderligere med brugerdefinerede CSS- eller tekstværktøjer.

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øj .activetil elementer i rullemenuen for at style dem som aktive . For at formidle den aktive tilstand til hjælpeteknologier skal du bruge aria-currentattributten - ved at bruge pageværdien for den aktuelle side eller truefor det aktuelle element i et sæt.

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>

handicappet

Føj .disabledtil elementer i rullemenuen for at style dem som deaktiverede .

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 placeres en rullemenu automatisk 100 % fra toppen og langs venstre side af dens forælder. Du kan ændre dette med retningsbestemte .drop*klasser, men du kan også styre dem med yderligere modifikationsklasser.

Føj .dropdown-menu-endtil en .dropdown-menuhøjrejuster rullemenuen. Retninger spejles, når du bruger Bootstrap i RTL, hvilket betyder .dropdown-menu-end, at det vises i venstre side.

Heads up! Dropdowns er placeret takket være Popper, undtagen når de er indeholdt i en navbar.

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 justering

Hvis du vil bruge responsiv justering, skal du deaktivere dynamisk positionering ved at tilføje data-bs-display="static"attributten og bruge de responsive variationsklasser.

For at højrejustere rullemenuen med det givne brudpunkt eller større, skal du.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end tilføje .

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>

For at justere rullemenuen til venstre med det givne brudpunkt eller større, skal du.dropdown-menu-end tilføje og .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>

Bemærk, at du ikke behøver at tilføje en data-bs-display="static"attribut til dropdown-knapper i navbarer, da Popper ikke bruges i navbarer.

Justeringsmuligheder

Ved at tage de fleste af mulighederne vist ovenfor, er her en lille køkkenvask-demo af forskellige dropdown-justeringsmuligheder på ét sted.

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>

Overskrifter

Tilføj en overskrift til at mærke sektioner af handlinger i enhver rullemenu.

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>

Afdelere

Adskil grupper af relaterede menupunkter med en skillelinje.

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>

Tekst

Placer enhver fritekst i en rullemenu med tekst, og brug mellemrumsværktøjer . Bemærk, at du sandsynligvis får brug for yderligere størrelsesstile for at begrænse menuens bredde.

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>

Formularer

Indsæt en formular i en rullemenu, eller gør den til en rullemenu, og brug margen- eller udfyldningsværktøjer til at give den den negative plads, du har brug for.

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>

Brug data-bs-offseteller data-bs-referencetil at ændre placeringen af rullemenuen.

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-luk-adfærd

Som standard lukkes rullemenuen, når der klikkes i eller uden for rullemenuen. Du kan bruge autoClosemuligheden for at ændre denne adfærd i rullemenuen.

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

Tilføjet i v5.2.0

Som en del af Bootstraps udviklende CSS-variabletilgang bruger dropdown-menuer nu lokale CSS-variabler .dropdown-menutil forbedret realtidstilpasning. Værdier for CSS-variablerne indstilles via Sass, så Sass-tilpasning understøttes også stadig.

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

Tilpasning gennem CSS-variabler kan ses på .dropdown-menu-darkklassen, hvor vi tilsidesætter specifikke værdier uden at tilføje duplikerede CSS-vælgere.

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

Variabler for alle rullemenuer:

$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 for den mørke rullemenu :

$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 for de CSS-baserede carets, der angiver en dropdowns interaktivitet:

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

Mixins

Mixins bruges til at generere de CSS-baserede carets og kan findes 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;
    }
  }
}

Brug

Via dataattributter eller JavaScript skifter dropdown-pluginnet skjult indhold (rullemenuer) ved at slå .showklassen til og fra på den overordnede .dropdown-menu. Attributten data-bs-toggle="dropdown"er afhængig af at lukke dropdown-menuer på et applikationsniveau, så det er en god idé altid at bruge det.

På berøringsaktiverede enheder tilføjer åbning af en dropdown tomme mouseoverhandlere til de umiddelbare børn af <body>elementet. Dette ganske vist grimme hack er nødvendigt for at omgå en særhed i iOS' begivenhedsdelegering , som ellers ville forhindre et tryk uden for rullemenuen i at udløse koden, der lukker rullemenuen. mouseoverNår rullemenuen er lukket, fjernes disse yderligere tomme handlere.

Via dataattributter

Føj data-bs-toggle="dropdown"til et link eller knap for at skifte til en rullemenu.

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

Via JavaScript

Kald rullemenuerne via JavaScript:

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

`data-bs-toggle="dropdown"`stadig påkrævet

Uanset om du kalder din dropdown via JavaScript eller i stedet bruger data-api, data-bs-toggle="dropdown"skal du altid være tilstede på dropdownens triggerelement.

Muligheder

Da muligheder kan videregives via dataattributter eller JavaScript, kan du tilføje et indstillingsnavn til data-bs-, som i data-bs-animation="{value}". Sørg for at ændre sagstypen for indstillingsnavnet fra " camelCase " til " kebab-case ", når du videregiver mulighederne via dataattributter. Brug for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 understøtter alle komponenter en eksperimentel reserveret dataattribut data-bs-config, der kan rumme simpel komponentkonfiguration som en JSON-streng. Når et element har data-bs-config='{"delay":0, "title":123}'og data-bs-title="456"attributter, vil den endelige titleværdi være, 456og de separate dataattributter vil tilsidesætte værdier givet på data-bs-config. Derudover er eksisterende dataattributter i stand til at rumme JSON-værdier som data-bs-delay='{"show":0,"hide":150}'.

Navn	Type	Standard	Beskrivelse
`autoClose`	boolsk, streng	`true`	Konfigurer den automatiske lukning af rullemenuen: `true`- rullemenuen lukkes ved at klikke udenfor eller inde i rullemenuen. `false`- rullemenuen lukkes ved at klikke på til/fra-knappen og manuelt kalde `hide`eller `toggle`metode. (Lukkes heller ikke ved at trykke på `esc`tasten) `'inside'`- rullemenuen lukkes (kun) ved at klikke inde i rullemenuen. `'outside'`- rullemenuen lukkes (kun) ved at klikke uden for rullemenuen. Bemærk: rullemenuen kan altid lukkes med `ESC`nøglen.
`boundary`	streng, element	`'clippingParents'`	Overløbsbegrænsningsgrænse for rullemenuen (gælder kun Poppers preventOverflow-modifikator). Som standard er `clippingParents`og kan det acceptere en HTMLElement-reference (kun via JavaScript). For mere information henvises til Poppers detectOverflow-dokumenter .
`display`	snor	`'dynamic'`	Som standard bruger vi Popper til dynamisk positionering. Deaktiver dette med `static`.
`offset`	array, streng, funktion	`[0, 2]`	Forskydning af rullemenuen i forhold til dets mål. Du kan sende en streng i dataattributter med kommaseparerede værdier som: `data-bs-offset="10,20"`. Når en funktion bruges til at bestemme forskydningen, kaldes den med et objekt, der indeholder popperplaceringen, referencen og popper rects som dets første argument. Det udløsende element DOM-node sendes som det andet argument. Funktionen skal returnere en matrix med to tal: udskridning , afstand . For mere information henvises til Poppers offset-dokumenter .
`popperConfig`	null, objekt, funktion	`null`	For at ændre Bootstraps standard Popper -konfiguration, se Poppers konfiguration . Når en funktion bruges til at oprette Popper-konfigurationen, kaldes den med et objekt, der indeholder Bootstraps standard Popper-konfiguration. Det hjælper dig med at bruge og flette standarden med din egen konfiguration. Funktionen skal returnere et konfigurationsobjekt for Popper.
`reference`	streng, element, objekt	`'toggle'`	Referenceelement i rullemenuen. Accepterer værdierne af `'toggle'`, `'parent'`, en HTMLElement-reference eller et objekt, der leverer `getBoundingClientRect`. For mere information henvises til Poppers constructor-dokumenter og virtuelle element-dokumenter .

Bruger funktion med`popperConfig`

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

Metoder

Metode	Beskrivelse
`dispose`	Ødelægger et elements dropdown. (Fjerner lagrede data på DOM-elementet)
`getInstance`	Statisk metode, som giver dig mulighed for at få dropdown-instansen tilknyttet et DOM-element, du kan bruge det sådan her: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statisk metode, som returnerer en dropdown-instans knyttet til et DOM-element eller opretter en ny, hvis den ikke blev initialiseret. Du kan bruge det sådan her: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Skjuler rullemenuen for en given navigationslinje eller navigation med faner.
`show`	Viser rullemenuen for en given navigationslinje eller navigation med faner.
`toggle`	Skifter rullemenuen for en given navigationslinje eller navigation med faner.
`update`	Opdaterer placeringen af et elements rullemenu.

Begivenheder

Alle dropdown-begivenheder udløses mod skifte-elementet og bobles derefter op. Så du kan også tilføje begivenhedslyttere på .dropdown-menu's overordnede element. hide.bs.dropdownog hidden.bs.dropdownhændelser har en clickEventegenskab (kun når den oprindelige hændelsestype er click), der indeholder et hændelsesobjekt for klikhændelsen.

Begivenhedstype	Beskrivelse
`hide.bs.dropdown`	Udløses med det samme, når `hide`instansmetoden er blevet kaldt.
`hidden.bs.dropdown`	Udløses, når rullemenuen er færdig med at være skjult for brugeren, og CSS-overgange er gennemført.
`show.bs.dropdown`	Udløses med det samme, når `show`instansmetoden kaldes.
`shown.bs.dropdown`	Udløses, når rullemenuen er gjort synlig for brugeren, og CSS-overgange er gennemført.

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

Dropdowns

Oversigt

Tilgængelighed

Eksempler

Enkelt knap

Split knap

Dimensionering

Mørke dropdowns

Vejbeskrivelse

RTL

Centreret

Dropup

Dropup centreret

Dropend

Dropstart

Menupunkter

Aktiv

handicappet

Menujustering

Responsiv justering

Justeringsmuligheder

Menuindhold

Overskrifter

Afdelere

Tekst

Formularer

Auto-luk-adfærd

CSS

Variabler

Sass variable

Mixins

Brug

Via dataattributter

Via JavaScript

`data-bs-toggle="dropdown"`stadig påkrævet

Muligheder

Bruger funktion med`popperConfig`

Metoder

Begivenheder

Dropdowns

Oversigt

Tilgængelighed

Eksempler

Enkelt knap

Split knap

Dimensionering

Mørke dropdowns

Vejbeskrivelse

RTL

Centreret

Dropup

Dropup centreret

Dropend

Dropstart

Menupunkter

Aktiv

handicappet

Menujustering

Responsiv justering

Justeringsmuligheder

Menuindhold

Overskrifter

Dropdown-overskrift

Afdelere

Tekst

Formularer

Dropdown muligheder

Auto-luk-adfærd

CSS

Variabler

Sass variable

Mixins

Brug

Via dataattributter

Via JavaScript

data-bs-toggle="dropdown"stadig påkrævet

Muligheder

Bruger funktion medpopperConfig

Metoder

Begivenheder

`data-bs-toggle="dropdown"`stadig påkrævet

Bruger funktion med`popperConfig`