Выпадающие списки — это переключаемые контекстные наложения для отображения списков ссылок и многого другого. Они становятся интерактивными с помощью встроенного плагина Bootstrap для выпадающих списков. Они переключаются по нажатию, а не при наведении курсора; это намеренное дизайнерское решение.
Выпадающие списки основаны на сторонней библиотеке Popper, которая обеспечивает динамическое позиционирование и определение области просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, которые содержат Popper. Однако Popper не используется для позиционирования выпадающих списков в навигационных панелях, поскольку динамическое позиционирование не требуется.
Специальные возможности
Стандарт WAI ARIA определяет настоящий role=»menu»виджет, но он применим только к меню в стиле приложений, которые запускают действия или функции. ARIA меню могут содержать только пункты меню, пункты меню с флажками, пункты меню с переключателями, группы переключателей и подменю.
С другой стороны, выпадающие списки Bootstrap являются универсальными и применимыми в различных ситуациях и структурах разметки. Например, можно создавать выпадающие списки, содержащие дополнительные поля ввода и элементы управления формой, такие как поля поиска или формы для входа в систему. По этой причине Bootstrap не ожидает (и не добавляет автоматически) атрибуты role и aria-, необходимые для настоящих меню ARIA. Авторам придётся самостоятельно добавлять эти более конкретные атрибуты.
Однако Bootstrap добавляет встроенную поддержку большинства стандартных функций взаимодействия с меню с помощью клавиатуры, таких как возможность перемещаться по отдельным элементам .dropdown-item с помощью клавиш управления курсором и закрывать меню с помощью клавиши Esc.
Примеры
Оберните переключатель выпадающего списка (кнопку или ссылку) и выпадающее меню в .dropdown или другой элемент, который объявляет position: relative;. В идеале в качестве триггера выпадающего списка следует использовать элемент <button>, но плагин будет работать и с элементами <a>. В приведенных здесь примерах используются семантические элементы <ul>, где это уместно, но поддерживается и пользовательская разметка.
Одиночная кнопка
Любой элемент .btn можно превратить в переключатель с выпадающим списком, внеся некоторые изменения в разметку. Вот как можно использовать их с элементами <button>:
Хотя
Кнопка разделения
Аналогичным образом создаются выпадающие списки с несколькими кнопками с практически такой же разметкой, как и для выпадающих списков с одной кнопкой, но с добавлением .dropdown-toggle-split для правильного оформления выпадающего списка.
Мы используем этот дополнительный класс, чтобы уменьшить горизонтальную padding область по обе стороны от курсора на 25% и убрать margin-left область, которая добавляется для обычных выпадающих меню. Эти дополнительные изменения позволяют расположить курсор по центру в разделённой кнопке и обеспечивают более подходящий размер области нажатия рядом с основной кнопкой.
Панель навигации
Темные выпадающие списки
И используем его в панели навигации: