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

Перемикайте контекстні накладення для відображення списків посилань тощо за допомогою розкривного плагіна 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>елементами:

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>

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

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>

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

<!-- 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. Не потрібно змінювати елементи спадного списку.

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>

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

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>

Напрямки

RTL

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

По центру

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

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

Викликайте спадні меню над елементами шляхом додавання .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>

Випадання по центру

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

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

Запускайте спадні меню праворуч від елементів шляхом додавання .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">
    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до батьківського елемента.

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

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

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>

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

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>

Активний

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

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>

Вимкнено

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

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>

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

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

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

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>

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

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

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

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>

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

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

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

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

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>

Заголовки

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

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>

Роздільники

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

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>

текст

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

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>

Форми

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

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>

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

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>

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

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

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

Змінні

Додано у v5.2.0

Як частина вдосконаленого підходу Bootstrap до змінних CSS, розкривні меню тепер використовують локальні змінні CSS .dropdown-menuдля покращеного налаштування в реальному часі. Значення для змінних CSS встановлюються через Sass, тому налаштування Sass все ще підтримується.

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

Налаштування за допомогою змінних CSS можна побачити в .dropdown-menu-darkкласі, де ми замінюємо конкретні значення без додавання повторюваних селекторів 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};

Змінні Sass

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

$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

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

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

Через JavaScript

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

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

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

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

Опції

Оскільки параметри можна передати через атрибути даних або JavaScript, ви можете додати назву параметра до data-bs-, як у data-bs-animation="{value}". Обов’язково змініть тип регістру назви параметра з « camelCase » на « kebab-case » під час передачі параметрів через атрибути даних. Наприклад, використовуйте data-bs-custom-class="beautifier"замість data-bs-customClass="beautifier".

Починаючи з Bootstrap 5.2.0, усі компоненти підтримують експериментальний зарезервований атрибут даних data-bs-config, який може зберігати просту конфігурацію компонента як рядок JSON. Якщо елемент має атрибути data-bs-config='{"delay":0, "title":123}'і data-bs-title="456", остаточне titleзначення буде таким, 456а окремі атрибути даних замінять значення, надані в data-bs-config. Крім того, наявні атрибути даних можуть містити такі значення JSON, як data-bs-delay='{"show":0,"hide":150}'.

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

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

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

методи

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

Події

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

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

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

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

Огляд

Доступність

Приклади

Одна кнопка

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

Розміри

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

Напрямки

RTL

По центру

Dropup

Випадання по центру

Dropend

Дропстарт

Пункти меню

Активний

Вимкнено

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

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

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

Зміст меню

Заголовки

Роздільники

текст

Форми

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

CSS

Змінні

Змінні Sass

Міксини

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

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

Через JavaScript

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

Опції

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

методи

Події

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

Огляд

Доступність

Приклади

Одна кнопка

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

Розміри

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

Напрямки

RTL

По центру

Dropup

Випадання по центру

Dropend

Дропстарт

Пункти меню

Активний

Вимкнено

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

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

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

Зміст меню

Заголовки

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

Роздільники

текст

Форми

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

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

CSS

Змінні

Змінні Sass

Міксини

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

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

Через JavaScript

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

Опції

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

методи

Події

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

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