На GitHub

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

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

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

Обзор

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

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

Доступность

The WAI ARIA стандарт определяет фактический виджет role="menu" widget, но это характерно для меню, похожего на приложение, которое запускает действия или функции. Меню 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" id="dropdownMenuLink" 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>

Самое приятное то, что Вы можете сделать это и с любым вариантом кнопки:

<!-- Пример отдельной кнопки danger -->
<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="#">Отделенная ссылка</a></li>
  </ul>
</div>

Раздельная кнопка

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

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

<!-- Пример отдельной кнопки danger -->
<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">Переключатель выпадающего списка</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 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. Никаких изменений в раскрывающихся элементах не требуется.

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

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton2" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <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="#">Панель навигации</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Переключить навигацию">
      <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.

<!-- Кнопка выпадающего меню по умолчанию -->
<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">
    <!-- Ссылки выпадающего меню -->
  </ul>
</div>

<!-- Раздельная кнопка выпадающего списка -->
<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">
    <!-- Ссылки выпадающего меню -->
  </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">
    Выпадающий список по центру
  </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 к родительскому элементу.

<!-- Кнопка выпадающего списка вправо по умолчанию -->
<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">
    <!-- Ссылки выпадающего меню -->
  </ul>
</div>

<!-- Раздельная кнопка выпадающего списка вправо -->
<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">
    <!-- Ссылки выпадающего меню -->
  </ul>
</div>

Выпадающий в начало

Активируйте раскрывающиеся меню слева от элементов, добавив .dropstart к родительскому элементу.

<!-- Кнопка выпадающего списка влево по умолчанию -->
<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">
    <!-- Ссылки выпадающего меню -->
  </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">
    По левому краю, по правому краю lg
  </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">
    По правому краю, по левому краю lg
  </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 protected]">
    </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 protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Пароль</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">
          Запомнить меня
        </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" id="dropdownMenuOffset" 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" id="dropdownMenuReference" 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" 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" 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

Переменные

Добавлено в версии 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 плагин раскрывающегося списка переключает скрытый контент (раскрывающиеся меню), переключая класс .show в родительском элементе списка .dropdown-menu. Атрибут data-bs-toggle="dropdown" используется для закрытия выпадающих меню на уровне приложения, поэтому рекомендуется всегда использовать его.

На устройствах с сенсорным экраном открытие выпадающего списка добавляет пустые обработчики mouseover к непосредственным потомкам элемента <body>. Этот, по общему признанию, уродливый хак необходим, чтобы обойти причуду в делегировании событий iOS, которая в противном случае предотвратила бы нажатие где-нибудь за пределами выпадающего списка от запуска кода, закрывающего выпадающий список. После закрытия выпадающего списка эти дополнительные пустые обработчики mouseover удаляются.

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

Добавьте data-bs-toggle="dropdown" к ссылке или кнопке, чтобы переключить выпадающий список.

<div class="dropdown">
  <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Триггер выпадающего списка
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Через JavaScript

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

События

Все выпадающие события запускаются в переключающемся элементе, а затем всплывают. Таким образом, Вы также можете добавить прослушивателей событий в родительский элемент. 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 => {
  // сделайте что-нибудь...
})

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

Обзор

Доступность

Примеры

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

Раздельная кнопка

Размеры

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

Направления

По центру

Вверх

Выпадающий по центру

Выпадающий в конец

Выпадающий в начало

Элементы меню

Активный

Отключенный

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

Отзывчивое выравнивание

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

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

Заголовки

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

Разделители

Текст

Формы

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

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

CSS

Переменные

Sass переменные

Sass миксины

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

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

Через JavaScript

Опции

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

Методы

События

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