Выпадающие элементы

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

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

Обзор

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

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

Доступность

The WAIARIA стандарт определяет фактический виджет role="menu" widget, но это характерно для меню, похожего на приложение, которое запускает действия или функции. Меню ARIA могут содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.

С другой стороны, выпадающие списки Bootstrap разработаны как общие и применимы к различным ситуациям и структурам разметки. Например, можно создавать выпадающие списки, содержащие дополнительные входные данные и элементы управления формой, такие как поля поиска или формы входа. По этой причине Bootstrap не ожидает (и не добавляет автоматически) какие-либо атрибуты role и aria-, необходимые для истинных меню ARIA. Авторы должны сами включить эти более конкретные атрибуты.

Однако Bootstrap добавляет встроенную поддержку для большинства стандартных взаимодействий с меню клавиатуры, таких как возможность перемещаться по отдельным элементам .dropdown-item с помощью клавиш курсора и закрывать меню с помощью клавиши ESC.

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>. В показанных здесь примерах используются семантические элементы <ul>, где это необходимо, но поддерживается настраиваемая разметка.

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

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

html

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

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

html

<divclass="dropdown"><aclass="btn btn-secondary dropdown-toggle"href="#"role="button"id="dropdownMenuLink"data-bs-toggle="dropdown"aria-expanded="false"> Ссылка выпадающего списка
</a><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li></ul></div>

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

<!-- Пример отдельной кнопки danger --><divclass="btn-group"><buttontype="button"class="btn btn-danger dropdown-toggle"data-bs-toggle="dropdown"aria-expanded="false"> Действие
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отделенная ссылка</a></li></ul></div>

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

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

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

<!-- Пример отдельной кнопки danger --><divclass="btn-group"><buttontype="button"class="btn btn-danger">Действие</button><buttontype="button"class="btn btn-danger dropdown-toggle dropdown-toggle-split"data-bs-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Переключатель выпадающего списка</span></button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отделенная ссылка</a></li></ul></div>

Размеры

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

<!-- Группы больших кнопок (по умолчанию и разделенные) --><divclass="btn-group"><buttonclass="btn btn-secondary btn-lg dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false"> Большая кнопка
</button><ulclass="dropdown-menu"> ...
</ul></div><divclass="btn-group"><buttonclass="btn btn-secondary btn-lg"type="button"> Большая раздельная кнопка
</button><buttontype="button"class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"data-bs-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Переключатель выпадающего списка</span></button><ulclass="dropdown-menu"> ...
</ul></div>

<divclass="btn-group"><buttonclass="btn btn-secondary btn-sm dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false"> Маленькая кнопка
</button><ulclass="dropdown-menu"> ...
</ul></div><divclass="btn-group"><buttonclass="btn btn-secondary btn-sm"type="button"> Маленькая раздельная кнопка
</button><buttontype="button"class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"data-bs-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Переключатель выпадающего списка</span></button><ulclass="dropdown-menu"> ...
</ul></div>

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

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

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

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

html

<divclass="dropdown"><buttonclass="btn btn-secondary dropdown-toggle"id="dropdownMenuButton2"type="button"data-bs-toggle="dropdown"aria-expanded="false"> Кнопка выпадающего списка
</button><ulclass="dropdown-menu dropdown-menu-dark"aria-labelledby="dropdownMenuButton2"><li><aclass="dropdown-item active"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отделенная ссылка</a></li></ul></div>

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

html

<navclass="navbar navbar-expand-lg navbar-dark bg-dark"><divclass="container-fluid"><aclass="navbar-brand"href="#">Панель навигации</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavDarkDropdown"aria-controls="navbarNavDarkDropdown"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNavDarkDropdown"><ulclass="navbar-nav"><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDarkDropdownMenuLink"role="button"data-bs-toggle="dropdown"aria-expanded="false"> Выпадающий список
</a><ulclass="dropdown-menu dropdown-menu-dark"aria-labelledby="navbarDarkDropdownMenuLink"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li></ul></li></ul></div></div></nav>

Направления

Направления переворачиваются в режиме RTL. Таким образом, .dropstart появится справа.

По центру

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

html

<divclass="dropdown-center"><buttonclass="btn btn-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false"> Выпадающий список по центру
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Действие два</a></li><li><aclass="dropdown-item"href="#">Действие три</a></li></ul></div>

Вверх

Вызвать выпадающее меню над элементами, добавив к родительскому элементу .dropup.

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

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

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

html

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

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

Вызовите раскрывающееся меню справа от элементов, добавив .dropend к родительскому элементу.

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

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

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

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

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

html

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

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

html

<ulclass="dropdown-menu"><li><spanclass="dropdown-item-text">Текст выпадающего списка</span></li><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li></ul>

Активные элементы меню

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

html

<ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Обычная ссылка</a></li><li><aclass="dropdown-item active"href="#"aria-current="true">Активная ссылка</a></li><li><aclass="dropdown-item"href="#">Другая ссылка</a></li></ul>

Отключенные элементы меню

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

html

<ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Обычная ссылка</a></li><li><aclass="dropdown-item disabled">Отключенная ссылка</a></li><li><aclass="dropdown-item"href="#">Другая ссылка</a></li></ul>

По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя. Вы можете изменить это с помощью направленных классов .drop*, но Вы также можете управлять ими с помощью дополнительных классов-модификаторов.

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

Внимание! Выпадающие списки позиционируются благодаря Popper, за исключением случаев, когда они содержатся в навигационной панели.

html

<divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-bs-toggle="dropdown"aria-expanded="false"> Пример меню с выравниванием по правому краю
</button><ulclass="dropdown-menu dropdown-menu-end"><li><buttonclass="dropdown-item"type="button">Действие</button></li><li><buttonclass="dropdown-item"type="button">Другое действие</button></li><li><buttonclass="dropdown-item"type="button">Что-то еще здесь</button></li></ul></div>

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

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

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

html

<divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-bs-toggle="dropdown"data-bs-display="static"aria-expanded="false"> По левому краю, но по правому краю на большом экране
</button><ulclass="dropdown-menu dropdown-menu-lg-end"><li><buttonclass="dropdown-item"type="button">Действие</button></li><li><buttonclass="dropdown-item"type="button">Другое действие</button></li><li><buttonclass="dropdown-item"type="button">Что-то еще здесь</button></li></ul></div>

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

html

<divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-bs-toggle="dropdown"data-bs-display="static"aria-expanded="false"> По правому краю, но по левому краю на большом экране
</button><ulclass="dropdown-menu dropdown-menu-end dropdown-menu-lg-start"><li><buttonclass="dropdown-item"type="button">Действие</button></li><li><buttonclass="dropdown-item"type="button">Другое действие</button></li><li><buttonclass="dropdown-item"type="button">Что-то еще здесь</button></li></ul></div>

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

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

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

html

<divclass="btn-group"><buttonclass="btn btn-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false"> Выпадающий список
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li></ul></div><divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-bs-toggle="dropdown"aria-expanded="false"> Меню с выравниванием по правому краю
</button><ulclass="dropdown-menu dropdown-menu-end"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li></ul></div><divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-bs-toggle="dropdown"data-bs-display="static"aria-expanded="false"> По левому краю, по правому краю lg
</button><ulclass="dropdown-menu dropdown-menu-lg-end"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li></ul></div><divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-bs-toggle="dropdown"data-bs-display="static"aria-expanded="false"> По правому краю, по левому краю lg
</button><ulclass="dropdown-menu dropdown-menu-end dropdown-menu-lg-start"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li></ul></div><divclass="btn-group dropstart"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-bs-toggle="dropdown"aria-expanded="false"> ВС в начале
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li></ul></div><divclass="btn-group dropend"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-bs-toggle="dropdown"aria-expanded="false"> ВС в конце
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li></ul></div><divclass="btn-group dropup"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-bs-toggle="dropdown"aria-expanded="false"> ВС вверху
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li></ul></div>

Заголовки

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

html

<ulclass="dropdown-menu"><li><h6class="dropdown-header">Заголовок выпадающего списка</h6></li><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li></ul>

Разделители

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

html

<ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отделенная ссылка</a></li></ul>

Текст

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

html

<divclass="dropdown-menu p-4 text-muted"style="max-width: 200px;"><p> Пример текста, который свободно перемещается в выпадающем меню.
</p><pclass="mb-0"> И это еще один пример текста.
</p></div>

Формы

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

html

<divclass="dropdown-menu"><formclass="px-4 py-3"><divclass="mb-3"><labelfor="exampleDropdownFormEmail1"class="form-label">Адрес электронной почты</label><inputtype="email"class="form-control"id="exampleDropdownFormEmail1"placeholder="email@example.com"></div><divclass="mb-3"><labelfor="exampleDropdownFormPassword1"class="form-label">Пароль</label><inputtype="password"class="form-control"id="exampleDropdownFormPassword1"placeholder="Пароль"></div><divclass="mb-3"><divclass="form-check"><inputtype="checkbox"class="form-check-input"id="dropdownCheck"><labelclass="form-check-label"for="dropdownCheck"> Запомнить меня
</label></div></div><buttontype="submit"class="btn btn-primary">Войти</button></form><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Впервые здесь? Зарегистрироваться</a><aclass="dropdown-item"href="#">Забыли пароль?</a></div>

html

<divclass="dropdown"><buttontype="button"class="btn btn-primary dropdown-toggle"data-bs-toggle="dropdown"aria-expanded="false"data-bs-auto-close="outside"> Выпадающая форма
</button><formclass="dropdown-menu p-4"><divclass="mb-3"><labelfor="exampleDropdownFormEmail2"class="form-label">Адрес электронной почты</label><inputtype="email"class="form-control"id="exampleDropdownFormEmail2"placeholder="email@example.com"></div><divclass="mb-3"><labelfor="exampleDropdownFormPassword2"class="form-label">Пароль</label><inputtype="password"class="form-control"id="exampleDropdownFormPassword2"placeholder="Password"></div><divclass="mb-3"><divclass="form-check"><inputtype="checkbox"class="form-check-input"id="dropdownCheck2"><labelclass="form-check-label"for="dropdownCheck2"> Запомнить меня
</label></div></div><buttontype="submit"class="btn btn-primary">Войти</button></form></div>

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

html

<divclass="d-flex"><divclass="dropdown me-1"><buttontype="button"class="btn btn-secondary dropdown-toggle"id="dropdownMenuOffset"data-bs-toggle="dropdown"aria-expanded="false"data-bs-offset="10,20"> Смещение
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li></ul></div><divclass="btn-group"><buttontype="button"class="btn btn-secondary">Ссылка</button><buttontype="button"class="btn btn-secondary dropdown-toggle dropdown-toggle-split"id="dropdownMenuReference"data-bs-toggle="dropdown"aria-expanded="false"data-bs-reference="parent"><spanclass="visually-hidden">Переключатель выпадающего списка</span></button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отделенная ссылка</a></li></ul></div></div>

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

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

html

<divclass="btn-group"><buttonclass="btn btn-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false"> Раскрывающийся список по умолчанию
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li></ul></div><divclass="btn-group"><buttonclass="btn btn-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"data-bs-auto-close="inside"aria-expanded="false"> Кликабельно внутри
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li></ul></div><divclass="btn-group"><buttonclass="btn btn-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"data-bs-auto-close="outside"aria-expanded="false"> Кликабельно снаружи
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li></ul></div><divclass="btn-group"><buttonclass="btn btn-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false"> Ручное закрытие
</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="dropdown-item"href="#">Элемент меню</a></li><li><aclass="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:$widthsolid;border-right:$widthsolidtransparent;border-bottom:0;border-left:$widthsolidtransparent;}@mixin caret-up($width:$caret-width){border-top:0;border-right:$widthsolidtransparent;border-bottom:$widthsolid;border-left:$widthsolidtransparent;}@mixin caret-end($width:$caret-width){border-top:$widthsolidtransparent;border-right:0;border-bottom:$widthsolidtransparent;border-left:$widthsolid;}@mixin caret-start($width:$caret-width){border-top:$widthsolidtransparent;border-right:$widthsolid;border-bottom:$widthsolidtransparent;}@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" к ссылке или кнопке, чтобы переключить выпадающий список.

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

Через JavaScript

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

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

constdropdownElementList=document.querySelectorAll('.dropdown-toggle')constdropdownList=[...dropdownElementList].map(dropdownToggleEl=>newbootstrap.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`

constdropdown=newbootstrap.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 завершены.

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

Выпадающие элементы

Обзор

Доступность

Примеры

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

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

Размеры

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

Направления

По центру

Вверх

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

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

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

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

Активные элементы меню

Отключенные элементы меню

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

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

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

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

Заголовки

Разделители

Текст

Формы

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

CSS

Переменные

Переменные Sass

Sass миксины

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

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

Через JavaScript

Опции

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

Методы

События

Выпадающие элементы

Обзор

Доступность

Примеры

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

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

Размеры

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

Направления

По центру

Вверх

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

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

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

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

Активные элементы меню

Отключенные элементы меню

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

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

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

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

Заголовки

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

Разделители

Текст

Формы

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

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

CSS

Переменные

Переменные Sass

Sass миксины

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

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

Через JavaScript

Опции

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

Методы

События

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