Панель навигации (Меню / Navbar)

Документация по созданию адаптивных панелей навигаций (Bootstrap Navbar / меню) + готовые интерактивные примеры меню. Включает поддержку фирменного стиля, навигации и многого другого, включая поддержку нашего плагина collapse.

Как это работает

Вот что вам нужно знать, прежде чем начать работу с навигационной панелью:

Панели навигации требуют обертывания .navbar с .navbar-expand { -sm|-md|-lg|-xl|-xxl } для гибкого сворачивания и классов цветовой схемы.
Панели навигации и их содержимое по умолчанию изменяются. Измените контейнер, чтобы ограничить их ширину по горизонтали различными способами.
Используйте служебные классы spacing и flex для управления расстоянием и выравниванием внутри панелей навигации.
Панели навигации по умолчанию адаптивны, но вы можете легко изменить их, чтобы изменить это. Адаптивное поведение зависит от нашего плагина Collapse JavaScript.
Обеспечьте доступность с помощью <nav> элемента или, при использовании более универсального элемента, такого как <div>, добавьте role="navigation" к каждой панели навигации, чтобы явно идентифицировать ее как ориентир для пользователей вспомогательных технологий.
Укажите текущий элемент, используя aria-current="page" для текущей страницы или aria-current="true" для текущего элемента в наборе.
Новое в версии 5.2.0: Панель навигации может быть оформлена CSS-переменными, область действия которых ограничена .navbar базовым классом. .navbar-light устарела и .navbar-dark была переписана для переопределения переменных CSS вместо добавления дополнительных стилей.

Эффект анимации этого компонента зависит от prefers-reduced-motion медиа-запроса. См. раздел с уменьшенным движением в нашей документации по специальным возможностям.

Поддерживаемый контент

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

.navbar-brand для обозначения вашей компании, продукта или проекта.
.navbar-nav для полноразмерной и облегченной навигации (включая поддержку выпадающих списков).
.navbar-toggler для использования с нашим плагином сворачивания и другими функциями переключения навигации.
Утилиты для сгибания и расстановки интервалов между элементами управления любыми формами и действиями.
.navbar-text для добавления строк текста по вертикали.
.collapse.navbar-collapse для группировки и скрытия содержимого панели навигации по родительской точке останова.
Добавьте необязательный параметр .navbar-scroll для установки max-height и прокрутки расширенного содержимого панели навигации.

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

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Главная</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Ссылка</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Искать</button>
      </form>
    </div>
  </div>
</nav>

Результат:

В этом примере используется цвет ( bg-light) и расстояние между ( my-2, my-lg-0, mr-sm-0, my-sm-0) служебные классы.

Бренд

.navbar-brand Может быть применен к большинству элементов, но привязка работает лучше всего, поскольку для некоторых элементов могут потребоваться служебные классы или пользовательские стили.

Текст

Добавьте свой текст в элемент с помощью класса .navbar-brand.

<!-- As a link -->
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Результат:

Изображение

Вы можете заменить текст внутри .navbar-brand на <img>.

<nav class="navbar bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/img/brand/bootstrap-solid.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

Результат:

Изображение и текст

Вы также можете воспользоваться некоторыми дополнительными утилитами для одновременного добавления изображения и текста. Обратите внимание на добавление .d-inline-block и .align-text-top на <img>.

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/img/brand/bootstrap-solid.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Результат:

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

Добавьте .active класс на.nav-link, чтобы указать текущую страницу.

Пожалуйста, обратите внимание, что вам также следует добавить aria-current атрибут на активную .nav-link панель.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" 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>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Результат:

Так как в навигационных панелях используются классы, вы можете полностью отказаться от подхода на основе списков, если хотите.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Главная</a>
        <a class="nav-link" href="#">Особенности</a>
        <a class="nav-link" href="#">Цены</a>
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Результат:

Вы также можете использовать раскрывающиеся списки на панели навигации. Для размещения раскрывающихся меню требуется элемент-оболочка, поэтому обязательно используйте отдельные и вложенные элементы для .nav-item и .nav-link как показано ниже.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" 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>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Результат:

Формы

Разместите различные элементы управления и компоненты формы на панели навигации:

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Ключевой запрос" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Искать</button>
    </form>
  </div>
</nav>

Результат:

Непосредственные дочерние элементы .navbar используют гибкую компоновку и по умолчанию будут иметь значение justify-content: space-between. При необходимости используйте дополнительные утилиты flex для настройки этого поведения.

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Ключевой запрос" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Искать</button>
    </form>
  </div>
</nav>

Результат:

Группы ввода тоже работают. Если ваша панель навигации представляет собой целую форму или по большей части форму, вы можете использовать <form> элемент в качестве контейнера и сохранить немного HTML.

<nav class="navbar bg-body-tertiary">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Имя пользователя" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Результат:

В этих формах панели навигации также поддерживаются различные кнопки. Это также отличное напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов разного размера.

<nav class="navbar bg-body-tertiary">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Главная кнопка</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Кнопка поменьше</button>
  </form>
</nav>

Результат:

Текст

Панели навигации могут содержать фрагменты текста с помощью .navbar-text. Этот класс настраивает выравнивание по вертикали и интервал по горизонтали для строк текста.

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <span class="navbar-text">
      Текст панели навигации со встроенным элементом
    </span>
  </div>
</nav>

Результат:

При необходимости комбинируйте с другими компонентами и утилитами.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

Результат:

Цветовые схемы

Новые темные панели навигации в версии 5.3.0 — Мы устарели .navbar-dark в пользу новых data-bs-theme="dark". Добавьте data-bs-theme="dark" в .navbar, чтобы включить цветовой режим для конкретного компонента. Узнайте больше о наших цветовых режимах.

Новое в версии 5.2.0 — Тематизация панели навигации теперь поддерживается переменными CSS и .navbar-light устарела. Переменные CSS применяются к .navbar, по умолчанию имеют “легкий” вид и могут быть переопределены с помощью .navbar-dark.

Темы панели навигации стали проще, чем когда-либо, благодаря сочетанию переменных Sass и CSS в Bootstrap. По умолчанию используется “светлая панель навигации” для использования со светлыми цветами фона, но вы также можете применить data-bs-theme="dark" к .navbar родительской панели для использования темных цветов фона. Затем настройте с помощью .bg-* и дополнительных утилит.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Создание тем для панели навигации никогда не было таким простым благодаря комбинации классов тем и background-color утилит. Выберите .navbar-light для использования со светлыми цветами фона или .navbar-dark для темных цветов фона. Затем настройте с помощью .bg-* утилит.

Контейнеры

Хотя это и не обязательно, вы можете обернуть панель навигации в .container, чтобы расположить ее по центру страницы, хотя обратите внимание, что внутренний контейнер все равно требуется. Или вы можете добавить контейнер внутри .navbar, чтобы размещать содержимое только по центру фиксированной или статической верхней панели навигации.

<div class="container">
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

Результат:

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

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Результат:

Размещение

Используйте наши утилиты позиционирования для установки навигационных панелей в нестатические позиции. Выберите фиксированный вверху, закрепленный внизу или закрепленный наверху (прокручивается вместе со страницей, пока не достигнет вершины, а затем остается там). Фиксированное использование навигационных панелей position: fixed, то есть они извлекаются из обычного потока DOM и могут потребовать настраиваемого CSS (например, padding-top на <body>) для предотвращения перекрытия с другими элементами.

Также обратите внимание на .sticky-top использование position: sticky, которое не полностью поддерживается в каждом браузере.

По умолчанию

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

Результат:

Зафиксированное вверху (fixed top)

<nav class="navbar fixed-top bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

Как работает можете посмотреть в этом примере.

Зафиксированное в низу (fixed bottom)

<nav class="navbar fixed-bottom bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

Как работает можете посмотреть в этом примере.

Липкое сверху (sticky top)

<nav class="navbar sticky-top bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

Липкое с низу (sticky bottom)

<nav class="navbar sticky-bottom bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Прокрутка

Добавьте .navbar-nav-scroll в .navbar-nav (или другой подкомпонент панели навигации), чтобы включить вертикальную прокрутку внутри переключаемого содержимого свернутой панели навигации. По умолчанию прокрутка запускается на 75vh (или 75% высоты окна просмотра), но вы можете переопределить это с помощью локального пользовательского свойства CSS --bs-navbar-height или пользовательских стилей. На больших экранах просмотра при расширении панели навигации содержимое будет отображаться так же, как на панели навигации по умолчанию.

Пожалуйста, обратите внимание, что такое поведение сопряжено с потенциальным недостатком overflow— при настройке overflow-y: auto (требуется для прокрутки содержимого здесь), overflow-x является эквивалентом auto, который обрезает некоторое горизонтальное содержимое.

Вот пример панели навигации, использующей .navbar-nav-scroll with style="--bs-scroll-height: 100px;", с некоторыми дополнительными утилитами для выделения полей для оптимального интервала.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Результат:

Отзывчивое поведение

Панели навигации могут использовать классы .navbar-toggler, .navbar-collapse и .navbar-expand { -sm|-md|-lg|-xl|-xxl } для определения того, когда их содержимое сворачивается за кнопкой. В сочетании с другими утилитами вы можете легко выбирать, когда показывать или скрывать определенные элементы.

Для панелей навигации, которые никогда не сворачиваются, добавьте на панель навигации .navbar-expand класс. Для панелей навигации, которые всегда сворачиваются, не добавляйте никаких .navbar-expand классов.

Переключатель

Переключатели панели навигации по умолчанию выровнены по левому краю, но если они следуют за родственным элементом, таким как .navbar-brand, они автоматически будут выровнены по крайнему правому краю. Изменение разметки приведет к изменению расположения переключателя. Ниже приведены примеры различных стилей переключения.

Без .navbar-brand отображается в наименьшей точке останова:

Для панелей навигации, которые никогда не сворачиваются, добавьте .navbar-expand класс на панель навигации. Для панелей навигации, которые всегда сворачиваются, не добавляйте никаких .navbar-expand классов.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Результат:

С названием бренда, показанным слева, и переключателем справа:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Результат:

С переключателем слева и названием бренда справа:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Результат:

Внешнее содержимое

Иногда требуется использовать плагин collapse для запуска элемента контейнера для содержимого , которое структурно находится за пределами .navbar . Поскольку наш плагин работает с id и data-bs-target сопоставлением, это легко сделать!

<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
  <div class="bg-dark p-4">
    <h5 class="text-body-emphasis h4">Collapsed content</h5>
    <span class="text-body-secondary">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Результат:

Collapsed content

Toggleable via the navbar brand.

При этом рекомендуется включить дополнительный JavaScript для программного перемещения фокуса на контейнер при его открытии. В противном случае пользователям клавиатуры и вспомогательных технологий, вероятно, будет трудно найти недавно обнаруженное содержимое, особенно если открытый контейнер находится перед переключателем в структуре документа. Мы также рекомендуем убедиться, что у переключателя есть aria-controls атрибут, указывающий на id контейнер содержимого. Теоретически это позволяет пользователям вспомогательных технологий напрямую переходить от переключателя к контейнеру, которым он управляет, но поддержка этого в настоящее время довольно неоднородна.

Offcanvas

Преобразуйте расширяющуюся и сворачивающуюся панель навигации в панель offcanvas с помощью компонента offcanvas. Мы расширяем оба стиля offcanvas по умолчанию и используем наши .navbar-expand-* классы для создания динамичной и гибкой навигационной боковой панели.

В приведенном ниже примере, чтобы создать панель навигации offcanvas, которая всегда сворачивается по всем точкам останова, полностью опустите класс .navbar-expand-*.

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

Живая демонстрация

Используйте кнопки ниже, чтобы показывать и скрывать элемент offcanvas с помощью JavaScript, который переключает .show класс на элемент с .offcanvas классом.

.offcanvas скрывает содержимое (по умолчанию)
.offcanvas.show показывает содержимое

Вы можете использовать ссылку с href атрибутом или кнопку с data-bs-target атрибутом. В обоих случаях data-bs-toggle="offcanvas" требуется.

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

Результат:

Link with href

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Прокрутка основного текста и фона

Вы также можете включить <body> прокрутку с видимым фоном.

Статический фон

Если для background установлено значение static, offcanvas не будет закрываться при нажатии за его пределами.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Результат:

I will not close if you click outside of me.

Темные offcanvas

Устарел в версии 5.3.0 Добавлен в версии 5.2.0

Измените внешний вид offcanvases с помощью утилит, чтобы они лучше соответствовали различным контекстам, например, темным панелям навигации. Здесь мы добавляем .text-bg-dark к .offcanvas и .btn-close-white к .btn-close для правильного оформления с помощью темного offcanvas. Если у вас внутри есть выпадающие списки, подумайте также о добавлении .dropdown-menu-dark в .dropdown-menu.

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

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Адаптивный

Добавлено в версии 5.2.0

Адаптивные классы offcanvas скрывают содержимое за пределами области просмотра от указанной точки останова и ниже. Выше этой точки останова содержимое внутри будет вести себя как обычно. Например, .offcanvas-lg скрывает содержимое в offcanvas ниже lg точки останова, но показывает содержимое выше lg точки останова.

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Результат:

Resize your browser to show the responsive offcanvas toggle.

This is content within an .offcanvas-lg.

Адаптивные классы offcanvas доступны для каждой точки останова.

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

Размещение

Для компонентов offcanvas нет размещения по умолчанию, поэтому вы должны добавить один из приведенных ниже классов-модификаторов.

.offcanvas-start помещает offcanvas в левую часть окна просмотра (показано выше)
.offcanvas-end помещает offcanvas справа от области просмотра
.offcanvas-top помещает offcanvas в верхнюю часть окна просмотра
.offcanvas-bottom помещает offcanvas в нижнюю часть окна просмотра

Попробуйте приведенные ниже верхний, правый и нижний примеры.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

Результат:

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

Результат:

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Результат:

...

Специальные возможности

Поскольку панель offcanvas концептуально является модальным диалоговым окном, обязательно добавьте aria-labelledby="..."ссылку на заголовок offcanvas в .offcanvas. Обратите внимание, что вам не нужно добавлять role="dialog" поскольку мы уже добавили это через JavaScript.