Выпадающие меню
Выпадающее меню (dropdown) — список действий, который появляется по щелчку на кнопке и прячется, когда щёлкнешь мимо. Оно экономит место: в админ-панели так прячут действия со строкой таблицы или меню пользователя. Положение меню рассчитывает библиотека Popper, которая входит в bootstrap.bundle.min.js.
Простое меню
Обёртка dropdown, в ней кнопка с классом dropdown-toggle и атрибутом data-bs-toggle="dropdown", а следом список dropdown-menu с пунктами dropdown-item:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div style="min-height: 200px">
<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><hr class="dropdown-divider"></li>
<li><button class="dropdown-item text-danger" type="button">Удалить</button></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Нажмите «Действия» — под кнопкой откроется список из трёх пунктов с линией перед «Удалить». Щелчок по пункту, мимо меню или клавиша Escape закрывают его. Стрелка на кнопке появляется благодаря классу dropdown-toggle.
Части меню
| Элемент | Класс |
|---|---|
| Пункт-ссылка или пункт-кнопка | dropdown-item |
| Разделитель | dropdown-divider на <hr> |
| Заголовок группы | dropdown-header на <h6> |
| Выбранный пункт | active |
| Недоступный пункт | disabled |
Направление и выравнивание
Меню по умолчанию открывается вниз и прижато к левому краю кнопки. Обёртку можно заменить на dropup, dropend или dropstart, чтобы меню открывалось вверх, вправо или влево. Класс dropdown-menu-end на списке прижимает меню к правому краю — так делают меню пользователя в правом углу шапки:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-expand bg-body-tertiary" style="min-height: 200px; align-items: flex-start">
<div class="container-fluid">
<span class="navbar-brand">Tasko Admin</span>
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Анна
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">anna@example.com</h6></li>
<li><a class="dropdown-item" href="#">Профиль</a></li>
<li><a class="dropdown-item" href="#">Выйти</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>В навигационной панели обёрткой служит пункт nav-item dropdown, а кнопкой — ссылка nav-link dropdown-toggle. Меню с адресом почты открывается под именем и не вылезает за правый край.
Частая ошибка
Положить dropdown-menu не сразу после кнопки или забыть обёртку dropdown. Bootstrap ищет меню рядом с кнопкой внутри общего родителя; если его там нет, щелчок ничего не делает или меню открывается не там. Держите кнопку и список рядом в одной обёртке.