Боковая панель offcanvas
Offcanvas — панель, которая выезжает с края экрана поверх страницы. Похоже на модальное окно, но панель прижата к краю и обычно высокая. В неё убирают меню на телефоне, корзину, фильтры. В админ-панели это главный способ спрятать боковое меню на узком экране.
Панель по кнопке
Панель — блок offcanvas offcanvas-start с id: шапка offcanvas-header с заголовком и крестиком и тело offcanvas-body. Кнопка открывает её атрибутом data-bs-toggle="offcanvas":
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div style="min-height: 260px">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar">
Меню
</button>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarLabel">Tasko Admin</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
</div>
<div class="offcanvas-body">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Обзор</a></li>
<li class="nav-item"><a class="nav-link" href="#">Пользователи</a></li>
<li class="nav-item"><a class="nav-link" href="#">Настройки</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Нажмите «Меню» — слева выедет белая панель со ссылками, а страница затемнится. Закрыть её можно крестиком, клавишей Escape или щелчком по затемнению.
С какой стороны
| Класс | Откуда выезжает |
|---|---|
offcanvas-start | Слева |
offcanvas-end | Справа |
offcanvas-top | Сверху |
offcanvas-bottom | Снизу |
Атрибут data-bs-scroll="true" на панели оставляет странице возможность прокручиваться, а data-bs-backdrop="false" убирает затемнение.
Меню, которое на широком экране всегда видно
Класс offcanvas-lg вместо offcanvas делает панель адаптивной: до 992 пикселей это выезжающая панель, а от 992 — обычный блок на своём месте. Для бокового меню админ-панели это ровно то, что нужно:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div style="min-height: 260px">
<button class="btn btn-outline-secondary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#adminMenu" aria-controls="adminMenu">
Меню
</button>
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="adminMenu" aria-labelledby="adminMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="adminMenuLabel">Разделы</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#adminMenu" aria-label="Закрыть"></button>
</div>
<div class="offcanvas-body">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Обзор</a></li>
<li class="nav-item"><a class="nav-link" href="#">Заказы</a></li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>В узком превью видна только кнопка «Меню», и панель выезжает по щелчку. На широком экране кнопка скрыта классом d-lg-none, а ссылки стоят прямо на странице. Такие же варианты есть для других точек: offcanvas-md, offcanvas-xl.
Частая ошибка
Скопировать крестик из обычной панели в адаптивную offcanvas-lg без атрибута data-bs-target. Кнопка с data-bs-dismiss="offcanvas" ищет ближайшего родителя с классом offcanvas, а у адаптивной панели класс другой — offcanvas-lg, и крестик ничего не делает. В адаптивной панели укажите кнопке закрытия data-bs-target="#adminMenu", как в примере выше.
Открыть панель из кода можно так: bootstrap.Offcanvas.getOrCreateInstance('#sidebar').show().