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

Отдельная кнопка

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>

И с элементами <a>:

<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" aria-labelledby="dropdownMenuLink">
    <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>

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

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Кнопка выпадающего списка
  </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>

И использовать его в навигационной панели:

<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">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Выпадающий список
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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

При использовании Bootstrap в RTL направления отражаются, то есть .dropstart будет отображаться с правой стороны.

Вверх

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

Вправо

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

<!-- Раздельная кнопка выпадающего списка влево -->
<div class="btn-group">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Переключатель выпадающего списка влево</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Ссылки выпадающего меню -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Раздельный выпадающий список влево
  </button>
</div>

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

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Выпадающий список
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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" href="#" tabindex="-1" 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, за исключением случаев, когда они содержатся в навигационной панели.

<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" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Выпадающий список
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

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

Заголовки

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

<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-muted" 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">Адрес электронной почты</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>

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

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

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

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Смещение
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" aria-labelledby="dropdownMenuReference">
      <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, чтобы изменить поведение раскрывающегося списка.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Раскрывающийся список по умолчанию
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Кликабельно снаружи
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Кликабельно внутри
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Ручное закрытие
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

Sass

Переменные

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

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($gray-900, 10%);
$dropdown-link-hover-bg:            $gray-200;

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

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

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

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

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

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

Миксины

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Через JavaScript

Вызов выпадающих списков через JavaScript:

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

`data-bs-toggle="dropdown"` по-прежнему требуется

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

Параметры

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

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

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

var dropdown = new bootstrap.Dropdown(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // при необходимости используйте defaultBsPopperConfig...
    // return newPopperConfig
  }
})

Методы

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

События

Все выпадающие события запускаются в переключающемся элементе, а затем всплывают. Таким образом, Вы также можете добавить прослушивателей событий в родительский элемент. hide.bs.dropdown и hidden.bs.dropdown имеют свойство clickEvent (только если исходный тип события click), который содержит объект события для события клика.

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

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // сделайте что-нибудь...
})

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

Обзор

Доступность

Примеры

Отдельная кнопка

Отдельная кнопка

Размеры

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

Направления

RTL

Вверх

Вправо

Влево

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

Активный

Отключенный

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

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

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

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

Заголовки

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

Разделители

Текст

Формы

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

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

Sass

Переменные

Миксины

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

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

Через JavaScript

data-bs-toggle="dropdown" по-прежнему требуется

Параметры

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

Методы

События

`data-bs-toggle="dropdown"` по-прежнему требуется

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