Bootstrap Dropdowns (выпадающие списки)

Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью Bootstrap плагина dropdown (выпадающие списки).

Обзор

Выпадающие списки - это переключаемые контекстные наложения для отображения списков ссылок и многого другого. Они стали интерактивными благодаря входящему в комплект плагину Bootstrap для JavaScript. Они переключаются щелчком мыши, а не наведением курсора мыши; это преднамеренное дизайнерское решение.

Выпадающие списки построены на базе библиотеки сторонних производителей: 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;. В идеале вы должны использовать <button> элемент в качестве триггера выпадающего списка, но плагин будет работать и с элементами <a>. В приведенных ниже примерах используются семантические элементы <ul> там, где это уместно, но поддерживается пользовательская разметка.

Одна кнопка

Любой элемент .btn можно превратить в выпадающий переключатель с некоторыми изменениями разметки. Вот как вы можете заставить их работать с элементами <button>:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Кнопка выпадающего списка 
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Другое действие</a></li>
    <li><a class="dropdown-item" href="#">Здесь что-то еще</a></li>
  </ul>
</div>

Результат:


Хотя <button> это рекомендуемый элемент управления для переключения выпадающего списка, могут возникнуть ситуации, когда вам придется использовать элемент <a>. Если вы это сделаете, мы рекомендуем добавить атрибут role="button", чтобы надлежащим образом передать назначение элемента управления вспомогательным технологиям, таким как программы чтения с экрана.

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Выпадающая ссылка 
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Другое действие</a></li>
    <li><a class="dropdown-item" href="#">Здесь что-то еще</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">
    Действие
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Другое действие</a></li>
    <li><a class="dropdown-item" href="#">Здесь что-то еще</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">Действие</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="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Другое действие</a></li>
    <li><a class="dropdown-item" href="#">Здесь что-то еще</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">
    Большая кнопка
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="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">
    Маленькая кнопка
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="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>

Живой пример:


Темные выпадающие списки

Устарело в версии 5.3.0

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

Внимание! Темные варианты компонентов устарели в версии 5.3.0 с введением цветовых режимов. Вместо добавления .dropdown-menu-darkустановите data-bs-theme="dark" для корневого элемента, родительской оболочки или самого компонента.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Кнопка выпадающего списка 
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Другое действие</a></li>
    <li><a class="dropdown-item" href="#">Здесь что-то еще</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="#">Панель навигации</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">
          <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Выпадающий список 
          </button>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Действие</a></li>
            <li><a class="dropdown-item" href="#">Другое действие</a></li>
            <li><a class="dropdown-item" href="#">Здесь что-то еще</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Результат:


Инструкции

В режиме RTL указания меняются местами. Как таковые, .dropstart они появятся справа.

По центру

Расположите выпадающее меню по центру под кнопкой переключения с .dropdown-center на родительском элементе.

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Выпадающий список по центру 
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Действие two</a></li>
    <li><a class="dropdown-item" href="#">Действие 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 на родительском элементе.

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Выпадающий список по центру 
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Действие two</a></li>
    <li><a class="dropdown-item" href="#">Действие 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 Выпадающий список

Запускает выпадающие меню слева от элементов путем добавления .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>.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Выпадающий список
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Действие</button></li>
    <li><button class="dropdown-item" type="button">Другое действие</button></li>
    <li><button class="dropdown-item" type="button">Здесь что-то еще</button></li>
  </ul>
</div>
Результат:

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

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Текст элемента выпадающего списка</span></li>
  <li><a class="dropdown-item" href="#">Экшен</a></li>
  <li><a class="dropdown-item" href="#">Еще одно действие</a></li>
  <li><a class="dropdown-item" href="#">Здесь что-то еще</a></li>
</ul>
Результат:

Активен

Добавьте .active к элементам в выпадающем списке, чтобы оформить их как активные. Чтобы передать активное состояние вспомогательным технологиям, используйте aria-current атрибут — используя page значение для текущей страницы или true для текущего элемента в наборе.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Обычная ссылка</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Активная ссылка</a></li>
  <li><a class="dropdown-item" href="#">Еще одна ссылка</a></li>
</ul>
Результат:

Отключено

Добавьте .disabled к элементам в выпадающем списке, чтобы оформить их как отключенные.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Обычная ссылка</a></li>
  <li><a class="dropdown-item disabled" aria-disabled="true">Отключенная ссылка</a></li>
  <li><a class="dropdown-item" href="#">Еще одна ссылка</a></li>
</ul>
Результат:

Выравнивание меню

По умолчанию выпадающее меню автоматически располагается на 100% сверху и вдоль левой стороны от своего родительского элемента. Вы можете изменить это с помощью классов directional .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">
    Пример меню, выровненного по правому краю 
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Действие</button></li>
    <li><button class="dropdown-item" type="button">Другое действие</button></li>
    <li><button class="dropdown-item" type="button">Здесь что-то еще</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">
    Выровнено по левому краю, но выровнено по правому краю при большом экране 
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Действие</button></li>
    <li><button class="dropdown-item" type="button">Другое действие</button></li>
    <li><button class="dropdown-item" type="button">Здесь что-то еще</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">
    Выровнено по правому краю, но выровнено по левому краю при большом экране
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Действие</button></li>
    <li><button class="dropdown-item" type="button">Другое действие</button></li>
    <li><button class="dropdown-item" type="button">Здесь что-то еще</button></li>
  </ul>
</div>
Результат:

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

Параметры выравнивания

Используя большинство вариантов, показанных выше, вот небольшая демонстрация различных вариантов выравнивания кухонной раковины в одном месте.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Выпадающий список
  </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">
    Меню, выровненное по правому краю
  </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">
    Выровнено по левому краю, выровнено по правому краю на точке 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">
    Выровнено по правому краю, выровнено по левому краю на точке 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">Заголовок выпадающего списка</h6></li>
  <li><a class="dropdown-item" href="#">Экшен</a></li>
  <li><a class="dropdown-item" href="#">Еще одно действие</a></li>
</ul>
Результат:

Разделители

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

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Действие</a></li>
  <li><a class="dropdown-item" href="#">Еще одно действие</a></li>
  <li><a class="dropdown-item" href="#">Здесь что-то еще</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Отдельная ссылка</a></li>
</ul>
Результат:

Текст

Поместите любой текст произвольной формы в раскрывающееся меню с текстом и используйте утилиты для создания интервалов. Обратите внимание, что вам, вероятно, понадобятся дополнительные стили определения размера, чтобы ограничить ширину меню.

<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
  <p>
    Несколько примеров текста, который свободно отображается в выпадающем меню.
  </p>
  <p class="mb-0">
    И это еще один пример текста.
  </p>
</div>
Результат:

Несколько примеров текста, который свободно отображается в выпадающем меню.

И это еще один пример текста.

Формы

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



Эл. адрес


<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Пароль</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">
          Запомнить меня
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Вход</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Новенький здесь? Зарегистрируйтесь</a>
  <a class="dropdown-item" href="#">Забыли пароль?</a>
</div>
Результат:
Эл. адрес
Новенький здесь? Зарегистрируйтесь Забыли пароль?
<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Выпадающая форма 
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Пароль</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Пароль">
    </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">
          Запомнить меня
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Войти</button>
  </form>
</div>
Результат:

Параметры выпадающего списка

Используйте data-bs-offset или data-bs-reference, чтобы изменить расположение выпадающего списка.

<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">
      Смещение
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Действие</a></li>
      <li><a class="dropdown-item" href="#">Другое действие</a></li>
      <li><a class="dropdown-item" href="#">Здесь что-то еще</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Справка</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">Переключить выпадающий список</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Действие</a></li>
      <li><a class="dropdown-item" href="#">Другое действие</a></li>
      <li><a class="dropdown-item" href="#">Здесь что-то еще</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" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Выпадающий список по умолчанию
  </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">
    Кликабельность внутри 
  </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">
    Кликабельность снаружи 
  </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">
    Закрытие вручную 
  </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

Переменные

Добавлено в версии 5.2.0

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

scss/_dropdown.scss
--#{$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};

Элементы выпадающего списка включают по крайней мере одну переменную, для которой не задано значение .dropdown. Это позволяет вам ввести новое значение, в то время как Bootstrap по умолчанию использует запасное значение.

  • --bs-dropdown-item-border-radius

Настройку с помощью CSS-переменных можно увидеть в .dropdown-menu-dark классе, где мы переопределяем определенные значения без добавления повторяющихся CSS-селекторов.

scss/_dropdown.scss
--#{$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

Переменные для всех выпадающих списков:

scss/_variables.scss 
$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    var(--#{$prefix}body-color);
$dropdown-bg:                       var(--#{$prefix}body-bg);
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            var(--#{$prefix}border-radius);
$dropdown-border-width:             var(--#{$prefix}border-width);
$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}); // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               var(--#{$prefix}box-shadow);

$dropdown-link-color:               var(--#{$prefix}body-color);
$dropdown-link-hover-color:         $dropdown-link-color;
$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg);

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color);

$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

Переменные для темного выпадающего списка:

scss/_variables.scss 
$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, указывающие на интерактивность выпадающего списка:

scss/_variables.scss 

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

SASS миксины

Миксины используются для генерации кареток на основе CSS и могут быть найдены в scss/mixins/_caret.scss.

scss/mixins/_caret.scss 
@mixin caret-down($width: $caret-width) {
  border-top: $width solid;
  border-right: $width solid transparent;
  border-bottom: 0;
  border-left: $width solid transparent;
}

@mixin caret-up($width: $caret-width) {
  border-top: 0;
  border-right: $width solid transparent;
  border-bottom: $width solid;
  border-left: $width solid transparent;
}

@mixin caret-end($width: $caret-width) {
  border-top: $width solid transparent;
  border-right: 0;
  border-bottom: $width solid transparent;
  border-left: $width solid;
}

@mixin caret-start($width: $caret-width) {
  border-top: $width solid transparent;
  border-right: $width solid;
  border-bottom: $width solid transparent;
}

@mixin caret(
  $direction: down,
  $width: $caret-width,
  $spacing: $caret-spacing,
  $vertical-align: $caret-vertical-align
) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $spacing;
      vertical-align: $vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down($width);
      } @else if $direction == up {
        @include caret-up($width);
      } @else if $direction == end {
        @include caret-end($width);
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $spacing;
        vertical-align: $vertical-align;
        content: "";
        @include caret-start($width);
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Использование

С помощью атрибутов данных или JavaScript плагин dropdown переключает скрытое содержимое (выпадающие меню), переключая .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

Выпадающие списки должны иметь data-bs-toggle="dropdown" в своем элементе trigger, независимо от того, вызываете ли вы свой выпадающий список через JavaScript или используете data-api.

Вызывайте выпадающие списки с помощью JavaScript:

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

Опции

Поскольку параметры могут передаваться через атрибуты данных или 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}'.

Конечный объект конфигурации - это объединенный результат data-bs-config, data-bs-, и js object где последнее заданное значение ключа переопределяет остальные.

Имя Тип По умолчанию Описание
autoClose логическое значение, строка true Настройте автоматическое закрытие выпадающего списка:
  • true - раскрывающийся список будет закрыт щелчком снаружи или внутри раскрывающегося меню.
  • false - выпадающий список будет закрыт нажатием кнопки переключения и вызовом вручную метода hide or toggle. (Также не будет закрыт нажатием Esc клавиши)
  • 'inside' - выпадающий список будет закрыт (только) щелчком внутри выпадающего меню.
  • 'outside' - выпадающий список будет закрыт (только) щелчком за пределами выпадающего меню.
Примечание: выпадающий список всегда можно закрыть с помощью Esc ключа.
boundary строка, элемент 'clippingParents' Граница ограничения переполнения выпадающего меню (применяется только к модификатору preventOverflow от Popper). По умолчанию это clippingParents и может принимать ссылку на HTMLElement (только через JavaScript). Для получения дополнительной информации обратитесь к документам по detect Overflow от Popper.
display строка 'dynamic' По умолчанию мы используем Popper для динамического позиционирования. Отключите это с помощью static.
offset массив, строка, функция [0, 2] Смещение выпадающего списка относительно целевого. В атрибутах данных можно передать строку со значениями, разделенными запятыми, например: data-bs-offset="10,20". Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение popper, ссылку и popper rects в качестве первого аргумента. Запускающий элемент DOM node передается в качестве второго аргумента. Функция должна возвращать массив с двумя числами: занос, расстояние. Для получения дополнительной информации обратитесь к offset docs от Popper.
popperConfig null, объект, функция null Чтобы изменить конфигурацию Pop-программы Bootstrap по умолчанию, см. Конфигурацию Popper. Когда функция используется для создания конфигурации Popper, она вызывается с объектом, который содержит конфигурацию Popper по умолчанию для Bootstrap. Это помогает вам использовать и объединить конфигурацию по умолчанию с вашей собственной конфигурацией. Функция должна возвращать объект конфигурации для Popper.
reference строка, элемент, объект 'toggle' Ссылочный элемент выпадающего меню. Принимает значения 'toggle', 'parent', ссылку на HTMLЭлемент или объект, предоставляющий getBoundingClientRect. Для получения дополнительной информации обратитесь к документации по конструктору Popper и документации по виртуальным элементам.

Использование функции с 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), которое содержит объект Event для события 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...
})

На этой странице

  1. Обзор
  2. Специальные возможности
  3. Примеры
    1. Одна кнопка
    2. Кнопка разделения
  4. Выбор размера
  5. Темные выпадающие списки
  6. Инструкции
    1. По центру
    2. Dropup
    3. Выпадающий список по центру
    4. Dropend Выпадающий список
    5. Dropstart Выпадающий список
  7. Пункты меню
    1. Активен
    2. Отключено
  8. Выравнивание меню
    1. Адаптивное выравнивание
    2. Параметры выравнивания
  9. Содержимое меню
    1. Заголовки
    2. Разделители
    3. Текст
    4. Формы
  10. Параметры выпадающего списка
    1. Поведение автоматического закрытия
  11. CSS
    1. Переменные
    2. Переменные Sass
    3. SASS миксины
  12. Использование
    1. С помощью атрибутов данных
    2. С помощью JavaScript
    3. Опции
      1. Использование функции с popperConfig
    4. Методы
    5. Мероприятия