Выпадающие списки

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

Одиночная кнопка

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

html

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

html

<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">
    Danger
  </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="#">Отдельная ссылка</a></li>
  </ul>
</div>

Split button

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

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

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">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">Переключить выпадающий список</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="#">Отдельная ссылка</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">Переключить выпадающий список</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">Переключить выпадающий список</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

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

Устарело в v5.3.0

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

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

html

<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="#">Отдельная ссылка</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">
          <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 на родительском элементе.

html

<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="#">Другое действие</a></li>
    <li><a class="dropdown-item" href="#">Что-то ещё</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">
    Выпадающий список вверх
  </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">
    Разделенная выпадающая кнопка
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Переключить выпадающий список</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropup centered

Сделайте меню dropup центрированным над переключателем с помощью .dropup-center на родительском элементе.

html

<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="#">Другое действие</a></li>
    <li><a class="dropdown-item" href="#">Что-то ещё</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">
    Выпадающий список в право
  </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">
    Разделенная выпадающая кнопка
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Переключить выпадающий список</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">
    Выпадающий список в лево
  </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">Переключить выпадающий список</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Разделенная выпадающая кнопка
  </button>
</div>

Меню элементов

Вы можете использовать элементы <a> или <button> в качестве элементов меню выпадающего списка.

html

<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 или текстовых утилит.

html

<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 для текущего элемента в наборе.

html

<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 к элементам в выпадающем списке, чтобы стилизовать их как отключенные.

html

<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% от верха и вдоль левой стороны его родителя. Вы можете изменить это с помощью классов направления .drop*, но вы также можете контролировать их с помощью дополнительных модификаторов классов.

Добавьте .dropdown-menu-end к .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">
    Выравнивание меню справа
  </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.

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">
    Выравнивание слева, но справа при большом экране
  </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.

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">
    Выравнивание справа, но слева при большом экране
  </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 не используется в навигационных панелях.

Варианты выравнивания

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

html

<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="#">Элемент меню</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 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Выравнивание справа
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <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 dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Выравнивание слева, но справа при большом экране
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <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 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><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 dropstart">
  <button type="button" class="btn btn-secondary 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>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary 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>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary 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>
  </ul>
</div>

Содержимое меню

Заголовки

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

html

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

Разделители

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

html

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

Текст

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

html

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

Формы

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

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Адрес электронной почты</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="Пароль">
    </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>

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">
    Форма выпадающего списка
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Адрес электронной почты</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, чтобы изменить положение выпадающего списка.

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">
      Смещение
    </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="#">Отдельная ссылка</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">
    Стандартный выпадающий список
  </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 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="#">Элемент меню</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 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="#">Элемент меню</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 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="#">Элемент меню</a></li>
    <li><a class="dropdown-item" href="#">Элемент меню</a></li>
    <li><a class="dropdown-item" href="#">Элемент меню</a></li>
  </ul>
</div>

CSS

Переменные

Добавлено в v5.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, плагин выпадающего списка переключает скрытое содержимое (меню выпадающих списков) путем переключения класса .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">
    Триггер выпадающего списка
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Через JavaScript

Выпадающие списки должны иметь атрибут data-bs-toggle="dropdown" на своем элементе переключателя, независимо от того, вызываете ли выпадающий список через JavaScript или используете 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`	boolean, string	`true`	Настройка поведения автозакрытия выпадающего списка: `true` - выпадающий список будет закрыт при клике вне или внутри меню выпадающего списка. `false` - выпадающий список будет закрыт при клике на кнопку переключателя и вызове метода `hide` или `toggle`. (Также не будет закрыт при нажатии `Esc` key) `'inside'` - выпадающий список будет закрыт (только) при клике внутри меню выпадающего списка. `'outside'` - выпадающий список будет закрыт (только) при клике вне меню выпадающего списка. Note: the dropdown can always be closed with the `Esc` key.
`boundary`	string, element	`'clippingParents'`	Ограничение границы выпадающего списка (применяется только к модификатору preventOverflow Popper’s). По умолчанию это `clippingParents` и может принимать ссылку на HTMLElement (только через JavaScript). Для получения дополнительной информации обратитесь к документам Popper’s detectOverflow docs.
`display`	string	`'dynamic'`	По умолчанию, мы используем Popper для динамического позиционирования. Отключите это с `static`.
`offset`	array, string, function	`[0, 2]`	Смещение выпадающего списка относительно его цели. Вы можете передать строку в атрибутах данных с разделенными запятыми значениями: `data-bs-offset="10,20"`. Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение Popper, ссылку и прямоугольники Popper в качестве первого аргумента. В качестве второго аргумента передается DOM-узел элемента, который инициирует вызов. Функция должна возвращать массив с двумя числами: skidding, distance. Для получения дополнительной информации обратитесь к документам Popper’s offset docs.
`popperConfig`	null, object, function	`null`	Для изменения настроек Popper по умолчанию Bootstrap, см. Popper’s configuration. Когда функция используется для создания конфигурации Popper, она вызывается с объектом, содержащим настройки Popper по умолчанию Bootstrap. Она помогает вам использовать и объединять настройки по умолчанию с вашими собственными настройками. Функция должна возвращать объект конфигурации для Popper.
`reference`	string, element, object	`'toggle'`	Ссылка на элемент меню выпадающего списка. Принимает значения `'toggle'`, `'parent'`, ссылку на HTMLElement или объект, предоставляющий `getBoundingClientRect`. Для получения дополнительной информации обратитесь к документам Popper’s constructor docs и virtual element docs.

Использование функции с `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’s. События hide.bs.dropdown и hidden.bs.dropdown имеют свойство clickEvent (только когда тип исходного события — click) которое содержит объект Event для события клика.

Тип события	Описание
`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 => {
  // сделать что-то...
})

Выпадающие списки

Обзор

Доступность

Примеры

Одиночная кнопка

Split button

Размеры

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

Направления

Центрированные

Dropup

Dropup centered

Dropend

Dropstart

Меню элементов

Активные

Отключенные

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

Взаимосвязанное выравнивание

Варианты выравнивания

Содержимое меню

Заголовки

Заголовок выпадающего списка

Разделители

Текст

Формы

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

Поведение автозакрытия

CSS

Переменные

Sass переменные

Sass миксины

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

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

Через JavaScript

Опции

Использование функции с popperConfig

Методы

События

Использование функции с `popperConfig`