Menu rozwijane

Przełącz nakładki kontekstowe do wyświetlania list linków i nie tylko za pomocą rozwijanej wtyczki Bootstrap.

Na tej stronie

Przegląd

Listy rozwijane to przełączalne, kontekstowe nakładki do wyświetlania list linków i nie tylko. Są interaktywne dzięki dołączonej wtyczce JavaScript rozwijanej Bootstrap. Są przełączane przez kliknięcie, a nie przez najechanie; jest to celowa decyzja projektowa .

Menu rozwijane są oparte na bibliotece Poppera innej firmy , która zapewnia dynamiczne pozycjonowanie i wykrywanie widocznych obszarów. Pamiętaj, aby dołączyć popper.min.js przed JavaScriptem Bootstrap lub użyć bootstrap.bundle.min.js/ bootstrap.bundle.jsktóry zawiera Poppera. Popper nie jest używany do pozycjonowania list rozwijanych w paskach nawigacyjnych, ponieważ dynamiczne pozycjonowanie nie jest wymagane.

Dostępność

Standard WAI ARIA definiuje rzeczywisty role="menu"widżet , ale jest to specyficzne dla menu aplikacji, które uruchamiają akcje lub funkcje. Menu ARIA mogą zawierać tylko pozycje menu, pozycje menu pól wyboru, pozycje menu przycisków opcji, grupy przycisków opcji i podmenu.

Z drugiej strony listy rozwijane Bootstrap są zaprojektowane tak, aby były ogólne i miały zastosowanie do różnych sytuacji i struktur znaczników. Na przykład można tworzyć listy rozwijane zawierające dodatkowe dane wejściowe i kontrolki formularzy, takie jak pola wyszukiwania lub formularze logowania. Z tego powodu Bootstrap nie oczekuje (ani automatycznie nie dodaje) żadnego z atrybutów rolei aria-wymaganych dla prawdziwych menu ARIA . Autorzy będą musieli sami uwzględnić te bardziej szczegółowe atrybuty.

Jednak Bootstrap dodaje wbudowaną obsługę większości standardowych interakcji menu klawiatury, takich jak możliwość poruszania się po poszczególnych .dropdown-itemelementach za pomocą klawiszy kursora i zamykania menu za pomocą ESCklawisza.

Przykłady

Zawiń przełącznik listy rozwijanej (przycisk lub link) i menu rozwijane w obrębie .dropdown, lub innego elementu, który deklaruje position: relative;. Listy rozwijane mogą być uruchamiane z elementów <a>lub <button>elementów, aby lepiej pasowały do Twoich potencjalnych potrzeb. W pokazanych tutaj przykładach są używane <ul>elementy semantyczne tam, gdzie jest to właściwe, ale obsługiwane są niestandardowe znaczniki.

Pojedynczy przycisk

Każdy singiel .btnmożna zmienić w rozwijany przełącznik z pewnymi zmianami znaczników. Oto, jak możesz je wykorzystać do pracy z dowolnymi <button>elementami:

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

Oraz z <a>elementami:

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

Najlepsze jest to, że możesz to zrobić również z dowolnym wariantem przycisku:

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

Przycisk podziału

Podobnie, utwórz listy rozwijane z podzielonymi przyciskami z praktycznie tym samym znacznikiem, co listy rozwijane z jednym przyciskiem, ale z dodatkiem .dropdown-toggle-splitodpowiedniego odstępu wokół karetki rozwijanej.

Używamy tej dodatkowej klasy, aby zmniejszyć poziom paddingpo obu stronach karetki o 25% i usunąć margin-lefttę dodaną do zwykłych rozwijanych przycisków. Te dodatkowe zmiany utrzymują kursor na środku przycisku podziału i zapewniają bardziej odpowiedni rozmiar obszaru trafienia obok głównego przycisku.

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

Rozmiary

Rozwijane przyciski działają z przyciskami wszystkich rozmiarów, w tym z przyciskami domyślnymi i dzielonymi przyciskami rozwijanymi.

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

Ciemne menu rozwijane

Wybierz ciemniejsze listy rozwijane, aby dopasować ciemny pasek nawigacyjny lub niestandardowy styl, dodając .dropdown-menu-darkdo istniejącego .dropdown-menu. Nie są wymagane żadne zmiany w elementach rozwijanych.

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

I oddanie go do użycia w pasku nawigacyjnym:

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

Wskazówki

RTL

Kierunki są odzwierciedlane podczas używania Bootstrapa w RTL, co oznacza, że .dropstartpojawi się po prawej stronie.

Dropup

Wyzwalaj menu rozwijane nad elementami, dodając .dropupje do elementu nadrzędnego.

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

Uruchom menu rozwijane po prawej stronie elementów, dodając .dropendje do elementu nadrzędnego.

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

Wyzwalaj menu rozwijane po lewej stronie elementów, dodając .dropstartje do elementu nadrzędnego.

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

Możesz użyć <a>lub <button>elementów jako elementów rozwijanych.

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

Możesz także tworzyć nieinteraktywne pozycje rozwijane za pomocą .dropdown-item-text. Zapraszam do dalszego stylu dzięki niestandardowym narzędziom CSS lub tekstowym.

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

Aktywny

Dodaj .activedo elementów na liście rozwijanej, aby nadać im styl jako aktywne . Aby przekazać stan aktywny technologiom wspomagającym, użyj aria-currentatrybutu — używając pagewartości dla bieżącej strony lub truedla bieżącego elementu w zestawie.

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

Wyłączone

Dodaj .disableddo elementów na liście rozwijanej, aby nadać im styl jako wyłączone .

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

Domyślnie menu rozwijane jest automatycznie umieszczane w 100% od góry i wzdłuż lewej strony swojego rodzica. Możesz to zmienić za pomocą .drop*klas kierunkowych, ale możesz też sterować nimi za pomocą dodatkowych klas modyfikujących.

Dodaj .dropdown-menu-enddo .dropdown-menuprawej wyrównaj menu rozwijane. Kierunki są odzwierciedlane podczas używania Bootstrapa w RTL, co oznacza, że .dropdown-menu-endpojawi się po lewej stronie.

Heads-up! Listy rozwijane są pozycjonowane dzięki Popperowi, z wyjątkiem sytuacji, gdy są zawarte w pasku nawigacyjnym.

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

Responsywne wyrównanie

Jeśli chcesz użyć elastycznego wyrównania, wyłącz dynamiczne pozycjonowanie, dodając data-bs-display="static"atrybut i użyj elastycznych klas odmian.

Aby wyrównać menu rozwijane w prawo.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end do danego punktu przerwania lub większego, dodaj .

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

Aby wyrównać lewe menu rozwijane do danego punktu przerwania lub większego, dodaj .dropdown-menu-endi .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>

Zauważ, że nie musisz dodawać data-bs-display="static"atrybutu do przycisków rozwijanych w paskach nawigacyjnych, ponieważ Popper nie jest używany w paskach nawigacyjnych.

Opcje wyrównania

Biorąc pod uwagę większość opcji pokazanych powyżej, oto mała demonstracja zlewu kuchennego z różnymi opcjami wyrównania rozwijanego w jednym miejscu.

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

Nagłówki

Dodaj nagłówek, aby oznaczyć sekcje działań w dowolnym menu rozwijanym.

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

Dzielniki

Oddziel grupy powiązanych pozycji menu za pomocą przegrody.

<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

Umieść dowolny tekst o dowolnej formie w rozwijanym menu z tekstem i użyj narzędzi do odstępów . Pamiętaj, że prawdopodobnie będziesz potrzebować dodatkowych stylów zmiany rozmiaru, aby ograniczyć szerokość menu.

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

Formularze

Umieść formularz w rozwijanym menu lub przekształć go w rozwijane menu i użyj narzędzi do marginesów lub dopełniania , aby nadać mu wymaganą ujemną przestrzeń.

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

Użyj data-bs-offsetlub data-bs-reference, aby zmienić lokalizację listy rozwijanej.

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

Zachowanie automatycznego zamykania

Domyślnie menu rozwijane jest zamykane po kliknięciu wewnątrz lub poza menu rozwijanym. Możesz użyć autoCloseopcji, aby zmienić to zachowanie listy rozwijanej.

<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

Zmienne

Zmienne dla wszystkich list rozwijanych:

$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($gray-900, 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;

Zmienne dla ciemnego menu rozwijanego :

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

Zmienne dla karetek opartych na CSS, które wskazują interaktywność listy rozwijanej:

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

Mieszanki

Mixiny służą do generowania karetek opartych na CSS i można je znaleźć w 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;
    }
  }
}

Stosowanie

Za pomocą atrybutów danych lub kodu JavaScript rozwijana wtyczka przełącza ukrytą zawartość (menu rozwijane), przełączając .showklasę na elemencie nadrzędnym .dropdown-menu. Atrybut jest data-bs-toggle="dropdown"wykorzystywany do zamykania menu rozwijanych na poziomie aplikacji, dlatego warto zawsze go używać.

Na urządzeniach z obsługą dotykową otwarcie listy rozwijanej dodaje puste mouseoverprocedury obsługi do bezpośrednich <body>elementów podrzędnych elementu. Ten wprawdzie brzydki hack jest niezbędny, aby obejść dziwactwo w delegowaniu zdarzeń systemu iOS , które w przeciwnym razie uniemożliwiłoby stuknięcie w dowolnym miejscu poza menu rozwijanym przed uruchomieniem kodu, który zamyka menu. Po zamknięciu listy rozwijanej te dodatkowe puste mouseovermoduły obsługi są usuwane.

Poprzez atrybuty danych

Dodaj data-bs-toggle="dropdown"do linku lub przycisku, aby przełączyć listę rozwijaną.

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

Przez JavaScript

Wywołaj listy rozwijane za pomocą JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

`data-bs-toggle="dropdown"`nadal wymagane

Niezależnie od tego, czy wywołasz listę rozwijaną za pomocą JavaScript, czy zamiast tego użyjesz interfejsu API danych, data-bs-toggle="dropdown"zawsze musi być obecny w elemencie wyzwalacza listy rozwijanej.

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-bs-, jak w data-bs-offset="". Pamiętaj, aby zmienić typ wielkości liter w nazwie opcji z camelCase na kebab-case podczas przekazywania opcji przez atrybuty danych. Na przykład zamiast używać data-bs-autoClose="false", użyj data-bs-auto-close="false".

Nazwa	Rodzaj	Domyślna	Opis
`boundary`	ciąg \| element	`'clippingParents'`	Granica ograniczenia przepełnienia menu rozwijanego (dotyczy tylko modyfikatora PreventOverflow Poppera). Domyślnie jest `'clippingParents'`i może akceptować odwołanie HTMLElement (tylko przez JavaScript). Aby uzyskać więcej informacji, zapoznaj się z dokumentacją Poppera detectOverflow .
`reference`	ciąg \| element \| obiekt	`'toggle'`	Element referencyjny menu rozwijanego. Akceptuje wartości `'toggle'`, `'parent'`, odwołania HTMLElement lub obiektu udostępniającego `getBoundingClientRect`. Aby uzyskać więcej informacji, zapoznaj się z dokumentacją konstruktora Poppera i dokumentacją elementów wirtualnych .
`display`	strunowy	`'dynamic'`	Domyślnie używamy Poppera do dynamicznego pozycjonowania. Wyłącz to za pomocą `static`.
`offset`	tablica \| ciąg \| funkcjonować	`[0, 2]`	Przesunięcie listy rozwijanej względem jej celu. Możesz przekazać ciąg w atrybutach danych z wartościami oddzielonymi przecinkami, takimi jak:`data-bs-offset="10,20"` Kiedy funkcja jest używana do określenia przesunięcia, jest wywoływana z obiektem zawierającym położenie poppera, referencję i prostokąty poppera jako pierwszy argument. Węzeł DOM elementu wyzwalającego jest przekazywany jako drugi argument. Funkcja musi zwrócić tablicę z dwiema liczbami: .`[skidding, distance]` Więcej informacji można znaleźć w dokumentacji offsetowej Poppera .
`autoClose`	wartość logiczna \| strunowy	`true`	Skonfiguruj zachowanie automatycznego zamykania menu rozwijanego: `true`- menu rozwijane zostanie zamknięte po kliknięciu na zewnątrz lub wewnątrz menu rozwijanego. `false`- menu rozwijane zostanie zamknięte przez kliknięcie przycisku przełączania i ręczne wywołanie `hide`lub `toggle`metodę. (Również nie zostanie zamknięty przez naciśnięcie `esc`klawisza) `'inside'`- menu rozwijane zostanie zamknięte (tylko) po kliknięciu wewnątrz menu rozwijanego. `'outside'`- menu rozwijane zostanie zamknięte (tylko) po kliknięciu poza menu rozwijanym.
`popperConfig`	null \| obiekt \| funkcjonować	`null`	Aby zmienić domyślną konfigurację Poppera Bootstrapa, zobacz Konfiguracja Poppera . Kiedy funkcja jest używana do utworzenia konfiguracji Poppera, jest wywoływana z obiektem, który zawiera domyślną konfigurację Poppera Bootstrapa. Pomaga w używaniu i łączeniu ustawień domyślnych z własną konfiguracją. Funkcja musi zwrócić obiekt konfiguracyjny dla Poppera.

Korzystanie z funkcji z`popperConfig`

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

Metody

metoda	Opis
`toggle`	Przełącza menu rozwijane danego paska nawigacyjnego lub nawigacji na kartach.
`show`	Pokazuje menu rozwijane danego paska nawigacyjnego lub nawigacji na kartach.
`hide`	Ukrywa menu rozwijane danego paska nawigacyjnego lub nawigacji w kartach.
`update`	Aktualizuje pozycję listy rozwijanej elementu.
`dispose`	Niszczy listę rozwijaną elementu. (Usuwa dane zapisane w elemencie DOM)
`getInstance`	Metoda statyczna, która pozwala uzyskać instancję rozwijaną powiązaną z elementem DOM, możesz jej użyć w następujący sposób:`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	Metoda statyczna, która zwraca instancję rozwijaną powiązaną z elementem DOM lub tworzy nową w przypadku, gdy nie została zainicjowana. Możesz go użyć w ten sposób:`bootstrap.Dropdown.getOrCreateInstance(element)`

Wydarzenia

Wszystkie zdarzenia rozwijane są uruchamiane w elemencie przełączającym, a następnie bąbelkowe. Możesz więc również dodać detektory zdarzeń do .dropdown-menuelementu nadrzędnego . hide.bs.dropdowna hidden.bs.dropdownzdarzenia mają clickEventwłaściwość (tylko wtedy, gdy pierwotny typ zdarzenia to click), która zawiera obiekt zdarzenia dla zdarzenia kliknięcia.

metoda	Opis
`show.bs.dropdown`	Uruchamiany natychmiast po wywołaniu metody show wystąpienia.
`shown.bs.dropdown`	Uruchamiany, gdy lista rozwijana jest widoczna dla użytkownika i przejścia CSS zostały zakończone.
`hide.bs.dropdown`	Uruchamiany natychmiast po wywołaniu metody hide instancji.
`hidden.bs.dropdown`	Uruchamiany po zakończeniu ukrywania listy rozwijanej przed użytkownikiem i zakończeniu przejść CSS.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

Menu rozwijane

Przegląd

Dostępność

Przykłady

Pojedynczy przycisk

Przycisk podziału

Rozmiary

Ciemne menu rozwijane

Wskazówki

RTL

Dropup

Dropright

Dropleft

Elementy menu

Aktywny

Wyłączone

Wyrównanie menu

Responsywne wyrównanie

Opcje wyrównania

Zawartość menu

Nagłówki

Dzielniki

Tekst

Formularze

Zachowanie automatycznego zamykania

Sass

Zmienne

Mieszanki

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

`data-bs-toggle="dropdown"`nadal wymagane

Opcje

Korzystanie z funkcji z`popperConfig`

Metody

Wydarzenia

Menu rozwijane

Przegląd

Dostępność

Przykłady

Pojedynczy przycisk

Przycisk podziału

Rozmiary

Ciemne menu rozwijane

Wskazówki

RTL

Dropup

Dropright

Dropleft

Elementy menu

Aktywny

Wyłączone

Wyrównanie menu

Responsywne wyrównanie

Opcje wyrównania

Zawartość menu

Nagłówki

Nagłówek rozwijany

Dzielniki

Tekst

Formularze

Opcje rozwijane

Zachowanie automatycznego zamykania

Sass

Zmienne

Mieszanki

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

data-bs-toggle="dropdown"nadal wymagane

Opcje

Korzystanie z funkcji zpopperConfig

Metody

Wydarzenia

`data-bs-toggle="dropdown"`nadal wymagane

Korzystanie z funkcji z`popperConfig`