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 przedstawionych 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 zmusić je do pracy z dowolnymi <button>elementami:

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>

Oraz z <a>elementami:

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>

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 dzielonymi 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 listy 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 listy rozwijanej.

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>

I oddanie go do użycia w pasku nawigacyjnym:

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>

Wskazówki

RTL

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

Wyśrodkowany

Ustaw menu rozwijane wyśrodkowane pod przełącznikiem .dropdown-centerna elemencie nadrzędnym.

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

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>

Wyśrodkowany na drop

Ustaw menu rozwijane wyśrodkowane nad przełącznikiem .dropup-centerna elemencie nadrzędnym.

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

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

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

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

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>

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.

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>

Aktywny

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

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>

Wyłączone

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

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>

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.

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>

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 .

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>

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.

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>

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.

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>

Nagłówki

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

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>

Dzielniki

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

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

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

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>

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

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>

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

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>

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.

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

Zmienne

Dodano w wersji 5.2.0

W ramach ewoluującego podejścia Bootstrap do zmiennych CSS, listy rozwijane używają teraz lokalnych zmiennych CSS w .dropdown-menucelu udoskonalenia dostosowywania w czasie rzeczywistym. Wartości zmiennych CSS są ustawiane przez Sass, więc dostosowywanie Sass jest nadal obsługiwane.

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

Dostosowanie za pomocą zmiennych CSS można zobaczyć w .dropdown-menu-darkklasie, w której nadpisujemy określone wartości bez dodawania zduplikowanych selektorów CSS.

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

Zmienne Sassa

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

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, więc dobrze jest go zawsze 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 type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Przez JavaScript

Wywołaj listy rozwijane za pomocą JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => 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

Ponieważ opcje mogą być przekazywane przez atrybuty danych lub JavaScript, możesz dołączyć nazwę opcji do data-bs-, jak w data-bs-animation="{value}". 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 użyj data-bs-custom-class="beautifier"zamiast data-bs-customClass="beautifier".

Od wersji Bootstrap 5.2.0 wszystkie komponenty obsługują eksperymentalny atrybut zarezerwowanych danych data-bs-config, który może zawierać prostą konfigurację komponentu w postaci ciągu JSON. Gdy element ma atrybuty data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", ostateczną titlewartością będzie, 456a oddzielne atrybuty danych zastąpią wartości podane w data-bs-config. Ponadto istniejące atrybuty danych mogą zawierać wartości JSON, takie jak data-bs-delay='{"show":0,"hide":150}'.

Nazwa	Rodzaj	Domyślna	Opis
`autoClose`	wartość logiczna, ciąg	`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. Uwaga: menu rozwijane można zawsze zamknąć `ESC`klawiszem.
`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 .
`display`	strunowy	`'dynamic'`	Domyślnie używamy Poppera do dynamicznego pozycjonowania. Wyłącz to za pomocą `static`.
`offset`	tablica, ciąg, funkcja	`[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: poślizg , odległość . Więcej informacji można znaleźć w dokumentacji offsetowej Poppera .
`popperConfig`	null, obiekt, funkcja	`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.
`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 .

Korzystanie z funkcji z`popperConfig`

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

Metody

metoda	Opis
`dispose`	Niszczy listę rozwijaną elementu. (Usuwa dane zapisane w elemencie DOM)
`getInstance`	Metoda statyczna, która pozwala uzyskać instancję rozwijaną skojarzoną 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ć tak: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Ukrywa menu rozwijane danego paska nawigacyjnego lub nawigacji w kartach.
`show`	Wyświetla menu rozwijane danego paska nawigacyjnego lub nawigacji na kartach.
`toggle`	Przełącza menu rozwijane danego paska nawigacyjnego lub nawigacji na kartach.
`update`	Aktualizuje pozycję listy rozwijanej elementu.

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.

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

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

Menu rozwijane

Przegląd

Dostępność

Przykłady

Pojedynczy przycisk

Przycisk podziału

Rozmiary

Ciemne listy rozwijane

Wskazówki

RTL

Wyśrodkowany

Dropup

Wyśrodkowany na drop

Dropend

Dropstart

Elementy menu

Aktywny

Wyłączone

Wyrównanie menu

Responsywne wyrównanie

Opcje wyrównania

Zawartość menu

Nagłówki

Dzielniki

Tekst

Formularze

Zachowanie automatycznego zamykania

CSS

Zmienne

Zmienne Sassa

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

Wskazówki

RTL

Wyśrodkowany

Dropup

Wyśrodkowany na drop

Dropend

Dropstart

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

CSS

Zmienne

Zmienne Sassa

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`