Spring til hovedindhold Spring til dokumentnavigation
in English

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:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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:

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <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:

<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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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.

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>

Dropright

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">
    Dropright
  </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 Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropleft

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">
  <div class="btn-group dropstart" role="group">
    <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>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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.

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

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

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

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

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

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

Menuindhold

Overskrifter

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

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

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

Noget eksempel på tekst, der flyder frit i rullemenuen.

Og dette er mere eksempeltekst.

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

Ny her omkring? Tilmelde glemt kodeord? 
<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>
<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>

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

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

Sass

Variabler

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:             rgba($black, .15);
$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:           $dropdown-padding-y $dropdown-item-padding-x;

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 id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Via JavaScript

Kald rullemenuerne via JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return 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

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-bs-, som i data-bs-offset="". Sørg for at ændre sagstypen for indstillingsnavnet fra camelCase til kebab-case, når du videregiver mulighederne via dataattributter. Brug f.eks. i stedet for at data-bs-autoClose="false"bruge data-bs-auto-close="false".

Navn Type Standard Beskrivelse
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 .
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 .
display snor 'dynamic' Som standard bruger vi Popper til dynamisk positionering. Deaktiver dette med static.
offset række | streng | fungere [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: .[skidding, distance]

For mere information henvises til Poppers offset-dokumenter .
autoClose boolsk | snor 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 hideeller togglemetode. (Lukkes heller ikke ved at trykke på esctasten)
  • 'inside'- rullemenuen lukkes (kun) ved at klikke inde i rullemenuen.
  • 'outside'- rullemenuen lukkes (kun) ved at klikke uden for rullemenuen.
popperConfig null | objekt | fungere 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.

Bruger funktion medpopperConfig

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

Metoder

Metode Beskrivelse
toggle Skifter rullemenuen for en given navigationslinje eller navigation med faner.
show Viser rullemenuen for en given navigationslinje eller navigation med faner.
hide Skjuler rullemenuen for en given navigationslinje eller navigation med faner.
update Opdaterer placeringen af ​​et elements rullemenu.
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)

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.

Metode Beskrivelse
show.bs.dropdown Udløses med det samme, når vis-instansmetoden kaldes.
shown.bs.dropdown Udløses, når dropdown-menuen er gjort synlig for brugeren, og CSS-overgange er gennemført.
hide.bs.dropdown Udløses med det samme, når metoden til at skjule forekomsten 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. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})