Випадаючі списки

Перемикайте контекстні накладення для відображення списків посилань тощо за допомогою розкривного плагіна Bootstrap.

На цій сторінці

Огляд

Випадаючі меню – це контекстні накладки, які можна перемикати, для відображення списків посилань тощо. Вони стають інтерактивними за допомогою плагіна JavaScript, що випадає, Bootstrap. Вони перемикаються клацанням, а не наведенням; це навмисне дизайнерське рішення .

Випадаючі списки побудовані на сторонній бібліотеці Popper , яка забезпечує динамічне позиціонування та визначення вікна перегляду. Обов’язково включіть popper.min.js перед JavaScript Bootstrap або використовуйте bootstrap.bundle.min.js/ bootstrap.bundle.js, який містить Popper. Popper не використовується для позиціонування спадних меню на навігаційних панелях, хоча динамічне позиціонування не потрібне.

Доступність

Стандарт WAI ARIA визначає фактичний role="menu"віджет , але це стосується програмних меню, які запускають дії або функції. Меню ARIA можуть містити лише пункти меню, пункти меню прапорців, елементи меню перемикачів, групи перемикачів і підменю.

Випадаючі меню Bootstrap, з іншого боку, створені як загальні та застосовні до різноманітних ситуацій і структур розмітки. Наприклад, можна створити розкривні списки, які містять додаткові введення та елементи керування формою, такі як поля пошуку або форми входу. З цієї причини Bootstrap не очікує (і не додає автоматично) жодного з атрибутів roleі , необхідних для справжніх меню ARIA . Автори повинні будуть самі включити ці конкретніші атрибути.aria-

Однак Bootstrap додає вбудовану підтримку для більшості стандартних взаємодій із меню клавіатури, наприклад, можливість переміщатися між окремими .dropdown-itemелементами за допомогою клавіш курсору та закривати меню за допомогою ESCклавіші.

Приклади

Загорніть перемикач спадного меню (вашу кнопку чи посилання) і спадне меню всередину .dropdownабо інший елемент, який оголошує position: relative;. Випадаючі списки можна запускати з <a>або <button>елементів, щоб краще відповідати вашим потенційним потребам. У наведених тут прикладах використовуються семантичні <ul>елементи, де це доречно, але підтримується спеціальна розмітка.

Одна кнопка

Будь-яку одиницю .btnможна перетворити на перемикач спадного меню, змінивши розмітку. Ось як ви можете використовувати їх для роботи з <button>елементами:

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

І з <a>елементами:

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

Найкраще те, що ви також можете зробити це за допомогою будь-якого варіанту кнопки:

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

Кнопка розділення

Подібним чином створюйте спадні списки розділених кнопок із практично тією самою розміткою, що й розкривні списки з однією кнопкою, але з додаванням .dropdown-toggle-splitдля правильного інтервалу навколо розкривного меню.

Ми використовуємо цей додатковий клас, щоб зменшити горизонталь paddingз обох боків каретки на 25% і видалити те margin-left, що додається для звичайних розкривних кнопок. Ці додаткові зміни зберігають каретку в центрі розділеної кнопки та забезпечують відповідніший розмір області влучення поряд із основною кнопкою.

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

Розміри

Розкривні списки кнопок працюють із кнопками будь-якого розміру, включаючи стандартні та розділені розкривні кнопки.

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

Темні спадні списки

Увімкніть темніші спадні меню, щоб відповідати темній навігаційній панелі або спеціальному стилю, додавши .dropdown-menu-darkдо наявного .dropdown-menu. Не потрібно змінювати елементи спадного списку.

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

І використовувати його в навігаційній панелі:

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

Напрямки

RTL

Під час використання Bootstrap у RTL вказівки відображаються дзеркально, тобто .dropstartз’являтимуться праворуч.

Dropup

Викликайте спадні меню над елементами шляхом додавання .dropupдо батьківського елемента.

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

Запускайте спадні меню праворуч від елементів шляхом додавання .dropendдо батьківського елемента.

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

Запускайте спадні меню ліворуч від елементів, додаючи .dropstartдо батьківського елемента.

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

Ви можете використовувати <a>або <button>елементи як розкривні елементи.

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

Ви також можете створювати неінтерактивні спадні елементи за допомогою .dropdown-item-text. Не соромтеся додавати додаткові стилі за допомогою спеціальних CSS або текстових утиліт.

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

Активний

Додайте .activeдо елементів у спадному меню, щоб надати їм статус активних . Щоб передати активний стан допоміжним технологіям, використовуйте aria-currentатрибут — використовуючи pageзначення для поточної сторінки або trueдля поточного елемента в наборі.

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

Вимкнено

Додайте .disabledдо елементів у випадаючому списку, щоб оформити їх як вимкнені .

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

За замовчуванням спадне меню автоматично розташовується на 100% від верхнього краю та вздовж лівого боку батьківського меню. Ви можете змінити це за допомогою .drop*класів спрямованості, але ви також можете контролювати їх за допомогою додаткових класів-модифікаторів.

Додайте .dropdown-menu-endдо a, .dropdown-menuщоб вирівняти спадне меню праворуч. Під час використання Bootstrap у RTL вказівки відображаються дзеркально, тобто .dropdown-menu-endвони відображатимуться зліва.

Голови вгору! Випадаючі списки розташовуються завдяки Popper, за винятком випадків, коли вони містяться на панелі навігації.

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

Чуйне вирівнювання

Якщо ви хочете використовувати адаптивне вирівнювання, вимкніть динамічне позиціонування, додавши data-bs-display="static"атрибут, і використовуйте адаптивні класи варіацій.

Щоб вирівняти спадне меню за заданою точкою зупину або більшою, додайте .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

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

Щоб вирівняти спадне меню ліворуч із заданою точкою зупину або більшою, додайте .dropdown-menu-endта .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>

Зауважте, що вам не потрібно додавати data-bs-display="static"атрибут до кнопок розкривного меню на панелях навігацій, оскільки Popper не використовується в панелях навігацій.

Варіанти вирівнювання

Використовуючи більшість параметрів, показаних вище, ось невелика демонстрація кухонної мийки з різними параметрами вирівнювання, що випадають, в одному місці.

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

Заголовки

Додайте заголовок, щоб позначити розділи дій у будь-якому спадному меню.

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

Роздільники

Розділіть групи пов’язаних пунктів меню роздільником.

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

Форми

Розмістіть форму в розкривному меню або перетворіть її в спадне меню та скористайтеся утилітами полів або відступів, щоб надати їй необхідний негативний простір.

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

Використовуйте data-bs-offsetабо data-bs-reference, щоб змінити розташування спадного списку.

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

Поведінка автоматичного закриття

За замовчуванням спадне меню закривається, якщо клацнути всередині або за межами спадного меню. Ви можете скористатися autoCloseопцією, щоб змінити цю поведінку спадного меню.

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

Сасс

Змінні

Змінні для всіх спадних меню:

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

Змінні для темного спадного списку :

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

Змінні для вставок на основі CSS, які вказують на інтерактивність спадного списку:

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

Міксини

Міксини використовуються для генерації кареток на основі CSS і їх можна знайти в 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;
    }
  }
}

Використання

За допомогою атрибутів даних або JavaScript плагін спадного меню перемикає прихований вміст (випадаючі меню), перемикаючи .showклас на батьківському .dropdown-menu. Атрибут data-bs-toggle="dropdown"використовується для закриття спадних меню на рівні програми, тому доцільно використовувати його завжди.

На сенсорних пристроях відкриття спадного меню додає порожні mouseoverобробники до безпосередніх дочірніх <body>елементів елемента. Цей, безсумнівно, потворний хак необхідний для вирішення проблеми з делегуванням подій iOS , яка в іншому випадку перешкоджала б запуску коду, який закриває спадне меню, будь-де за межами спадного меню. Після закриття спадного меню ці додаткові пусті mouseoverобробники видаляються.

Через атрибути даних

Додайте data-bs-toggle="dropdown"до посилання або кнопку, щоб увімкнути спадне меню.

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

Через JavaScript

Виклик спадних меню через JavaScript:

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

`data-bs-toggle="dropdown"`все ще потрібно

Незалежно від того, викликаєте ви розкривне меню за допомогою JavaScript чи натомість використовуєте data-api, data-bs-toggle="dropdown"завжди має бути присутнім у тригерному елементі розкривного меню.

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-bs-, як у data-bs-offset="". Обов’язково змініть тип регістру назви опції з camelCase на kebab-case під час передачі опцій через атрибути даних. Наприклад, замість використання data-bs-autoClose="false"використовуйте data-bs-auto-close="false".

Ім'я	Тип	За замовчуванням	опис
`boundary`	рядок \| елемент	`'clippingParents'`	Межа обмеження переповнення спадного меню (застосовується лише до модифікатора preventOverflow Попера). За замовчуванням він `'clippingParents'`приймає посилання HTMLElement (тільки через JavaScript). Для отримання додаткової інформації зверніться до документів Popper's detectOverflow .
`reference`	рядок \| елемент \| об'єкт	`'toggle'`	Посилальний елемент спадного меню. Приймає значення `'toggle'`, `'parent'`, посилання HTMLElement або об’єкт, що надає `getBoundingClientRect`. Для отримання додаткової інформації зверніться до документів конструктора Поппера та документів віртуальних елементів .
`display`	рядок	`'dynamic'`	За замовчуванням ми використовуємо Popper для динамічного позиціонування. Вимкніть це за допомогою `static`.
`offset`	масив \| рядок \| функція	`[0, 2]`	Зсув спадного списку відносно його цілі. Ви можете передати рядок в атрибутах даних зі значеннями, розділеними комами, наприклад:`data-bs-offset="10,20"` Коли функція використовується для визначення зміщення, вона викликається з об’єктом, що містить розміщення поппера, посилання та прямокутники поппера як перший аргумент. Вузол DOM тригерного елемента передається як другий аргумент. Функція має повертати масив із двома числами: .`[skidding, distance]` Для отримання додаткової інформації зверніться до офсетної документації Поппера .
`autoClose`	логічний \| рядок	`true`	Налаштуйте поведінку автоматичного закриття спадного списку: `true`- спадне меню буде закрито, клацнувши поза або всередині спадного меню. `false`- випадаюче меню буде закрито, натиснувши кнопку перемикача та вручну викликавши метод `hide`або . `toggle`(Також не буде закрито натисканням `esc`клавіші) `'inside'`- випадаюче меню буде закрито (тільки) клацанням у випадаючому меню. `'outside'`- спадне меню буде закрито (тільки) клацанням за межами спадного меню.
`popperConfig`	нуль \| об'єкт \| функція	`null`	Щоб змінити конфігурацію Popper Bootstrap за замовчуванням, перегляньте конфігурацію Popper . Коли функція використовується для створення конфігурації Popper, вона викликається з об’єктом, який містить стандартну конфігурацію Popper Bootstrap. Це допоможе вам використовувати та об’єднати стандартну конфігурацію з вашою власною конфігурацією. Функція має повертати об’єкт конфігурації для Popper.

Використання функції з`popperConfig`

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

методи

метод	опис
`toggle`	Перемикає спадне меню певної панелі навігації або навігації з вкладками.
`show`	Показує спадне меню певної панелі навігації або навігації з вкладками.
`hide`	Приховує спадне меню певної навігаційної панелі або вкладок.
`update`	Оновлює положення спадного меню елемента.
`dispose`	Знищує спадне меню елемента. (Видаляє збережені дані в елементі DOM)
`getInstance`	Статичний метод, який дозволяє вам отримати екземпляр розкривного меню, пов’язаний з елементом DOM, ви можете використовувати його так:`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	Статичний метод, який повертає екземпляр спадного списку, пов’язаний з елементом DOM, або створює новий, якщо він не був ініціалізований. Ви можете використовувати це так:`bootstrap.Dropdown.getOrCreateInstance(element)`

Події

Усі події, що випадають, запускаються в елементі перемикання, а потім з’являються вгору. Таким чином, ви також можете додати слухачі подій .dropdown-menuдо батьківського елемента. hide.bs.dropdownі hidden.bs.dropdownподії мають clickEventвластивість (тільки якщо вихідний тип події — click), яка містить об’єкт події для події клацання.

метод	опис
`show.bs.dropdown`	Спрацьовує негайно, коли викликається метод екземпляра шоу.
`shown.bs.dropdown`	Запускається, коли спадне меню стало видимим для користувача та завершено переходи CSS.
`hide.bs.dropdown`	Спрацьовує негайно після виклику методу примірника hide.
`hidden.bs.dropdown`	Запускається, коли спадне меню перестає бути прихованим від користувача та завершено переходи CSS.

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

Випадаючі списки

Огляд

Доступність

Приклади

Одна кнопка

Кнопка розділення

Розміри

Темні спадні списки

Напрямки

RTL

Dropup

Dropright

Dropleft

Пункти меню

Активний

Вимкнено

Вирівнювання меню

Чуйне вирівнювання

Варіанти вирівнювання

Зміст меню

Заголовки

Роздільники

текст

Форми

Поведінка автоматичного закриття

Сасс

Змінні

Міксини

Використання

Через атрибути даних

Через JavaScript

`data-bs-toggle="dropdown"`все ще потрібно

Опції

Використання функції з`popperConfig`

методи

Події

Випадаючі списки

Огляд

Доступність

Приклади

Одна кнопка

Кнопка розділення

Розміри

Темні спадні списки

Напрямки

RTL

Dropup

Dropright

Dropleft

Пункти меню

Активний

Вимкнено

Вирівнювання меню

Чуйне вирівнювання

Варіанти вирівнювання

Зміст меню

Заголовки

Розкривний заголовок

Роздільники

текст

Форми

Параметри, що випадають

Поведінка автоматичного закриття

Сасс

Змінні

Міксини

Використання

Через атрибути даних

Через JavaScript

data-bs-toggle="dropdown"все ще потрібно

Опції

Використання функції зpopperConfig

методи

Події

`data-bs-toggle="dropdown"`все ще потрібно

Використання функції з`popperConfig`