1111
Перейти к основному содержаниюПерейти к навигации по документам
Cмотреть на GitHub

Навигационная панель

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

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

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

Вот что вам надо знать перед использованием навбара:

  • Навбары требуют «обертки» из классов .navbar и .navbar-expand{-sm|-md|-lg|-xl|-xxl} для отзывчивости при «складывании»и классы , а также классы цветовых схем.
  • Навбары и их содержимое по умолчанию гибкие. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
  • Используйте наши классы интервалов (spacing) и «флекс» (flex) для контроля над пространством и выравниванием внутри навбаров.
  • Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» 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 для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации.
  • .form-inline для любых органов контроля форм и действий с ними.
  • .navbar-text для добавления вертикально центрированных строк текста.
  • .collapse.navbar-collapse для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.
  • Добавьте необязательный класс .navbar-scroll, чтобы установить максимальную высоту max-height и прокрутить расширенное содержимое панели навигации.

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

html
<navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Навбар</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Переключатель навигации"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass="navbar-nav me-auto mb-2 mb-lg-0"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Главная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"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><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li></ul></li><liclass="nav-item"><aclass="nav-link disabled">Отключенная</a></li></ul><formclass="d-flex"role="search"><inputclass="form-control me-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success"type="submit">Поиск</button></form></div></div></nav>

В этом примере используются клссы утилит фона (bg-light) и интервала (me-auto, mb-2, mb-lg-0, me-2).

Бренд

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

Текст

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

html
<!-- As a link --><navclass="navbar bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Панель навигации</a></div></nav><!-- As a heading --><navclass="navbar bg-body-tertiary"><divclass="container-fluid"><spanclass="navbar-brand mb-0 h1">Панель навигации</span></div></nav>

Изображение

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

html
<navclass="navbar bg-body-tertiary"><divclass="container"><aclass="navbar-brand"href="#"><imgsrc="/docs/5.3/assets/brand/bootstrap-logo.svg"alt="Bootstrap"width="30"height="24"></a></div></nav>

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

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

html
<navclass="navbar bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#"><imgsrc="/docs/5.3/assets/brand/bootstrap-logo.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.

html
<navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Панель навигации</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNav"aria-controls="navbarNav"aria-expanded="false"aria-label="Переключатель навигации"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Главная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Рекомендуемые</a></li><liclass="nav-item"><aclass="nav-link"href="#">Цена</a></li><liclass="nav-item"><aclass="nav-link disabled">Отключенная</a></li></ul></div></div></nav>

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

html
<navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Панель навигации</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavAltMarkup"aria-controls="navbarNavAltMarkup"aria-expanded="false"aria-label="Переключатель навигации"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNavAltMarkup"><divclass="navbar-nav"><aclass="nav-link active"aria-current="page"href="#">Главная</a><aclass="nav-link"href="#">Рекомендуемые</a><aclass="nav-link"href="#">Цена</a><aclass="nav-link disabled">Отключенная</a></div></div></div></nav>

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

html
<navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Панель навигации</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Переключатель навигации"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNavDropdown"><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Главная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Рекомендуемые</a></li><liclass="nav-item"><aclass="nav-link"href="#">Цена</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"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></li></ul></div></div></nav>

Формы

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

html
<navclass="navbar bg-body-tertiary"><divclass="container-fluid"><formclass="d-flex"role="search"><inputclass="form-control me-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success"type="submit">Поиск</button></form></div></nav>

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

html
<navclass="navbar bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand">Панель навигации</a><formclass="d-flex"role="search"><inputclass="form-control me-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success"type="submit">Поиск</button></form></div></nav>

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

html
<navclass="navbar bg-body-tertiary"><formclass="container-fluid"><divclass="input-group"><spanclass="input-group-text"id="basic-addon1">@</span><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="basic-addon1"></div></form></nav>

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

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

Текст

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

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

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

html
<navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Навбар с текстом</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarText"aria-controls="navbarText"aria-expanded="false"aria-label="Переключатель навигации"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarText"><ulclass="navbar-nav me-auto mb-2 mb-lg-0"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Главная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Рекомендуемые</a></li><liclass="nav-item"><aclass="nav-link"href="#">Цена</a></li></ul><spanclass="navbar-text"> Навбар текст с инлайновым элементом
</span></div></div></nav>

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

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

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

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

<navclass="navbar bg-dark"data-bs-theme="dark"><!-- Navbar content --></nav><navclass="navbar bg-primary"data-bs-theme="dark"><!-- Navbar content --></nav><navclass="navbar"style="background-color: #e3f2fd;"><!-- Navbar content --></nav>

Контейнеры

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

html
<divclass="container"><navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Панель навигации</a></div></nav></div>

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

html
<navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-md"><aclass="navbar-brand"href="#">Панель навигации</a></div></nav>

Размещение

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

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

html
<navclass="navbar bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">По умолчанию</a></div></nav>
html
<navclass="navbar fixed-top bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Фиксированный вверху</a></div></nav>
html
<navclass="navbar fixed-bottom bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Фиксированный внизу</a></div></nav>
html
<navclass="navbar sticky-top bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Приклеен к верху</a></div></nav>
html
<navclass="navbar sticky-bottom bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Приклеен к низу</a></div></nav>

Прокрутка

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

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

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

html
<navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Прокрутка навбара</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarScroll"aria-controls="navbarScroll"aria-expanded="false"aria-label="Переключатель навигации"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarScroll"><ulclass="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll"style="--bs-scroll-height: 100px;"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Главная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"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><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li></ul></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Ссылка</a></li></ul><formclass="d-flex"role="search"><inputclass="form-control me-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success"type="submit">Поиск</button></form></div></div></nav>

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

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

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

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

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

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

html
<navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-fluid"><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarTogglerDemo01"aria-controls="navbarTogglerDemo01"aria-expanded="false"aria-label="Переключатель навигации"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarTogglerDemo01"><aclass="navbar-brand"href="#">Скрытый бренд</a><ulclass="navbar-nav me-auto mb-2 mb-lg-0"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Главная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item"><aclass="nav-link disabled">Отключенная</a></li></ul><formclass="d-flex"role="search"><inputclass="form-control me-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success"type="submit">Поиск</button></form></div></div></nav>

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

html
<navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-fluid"><aclass="navbar-brand"href="#">Панель навигации</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarTogglerDemo02"aria-controls="navbarTogglerDemo02"aria-expanded="false"aria-label="Переключатель навигации"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarTogglerDemo02"><ulclass="navbar-nav me-auto mb-2 mb-lg-0"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Главная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item"><aclass="nav-link disabled">Отключенная</a></li></ul><formclass="d-flex"role="search"><inputclass="form-control me-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success"type="submit">Поиск</button></form></div></div></nav>

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

html
<navclass="navbar navbar-expand-lg bg-body-tertiary"><divclass="container-fluid"><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarTogglerDemo03"aria-controls="navbarTogglerDemo03"aria-expanded="false"aria-label="Переключатель навигации"><spanclass="navbar-toggler-icon"></span></button><aclass="navbar-brand"href="#">Панель навигации</a><divclass="collapse navbar-collapse"id="navbarTogglerDemo03"><ulclass="navbar-nav me-auto mb-2 mb-lg-0"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Главная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item"><aclass="nav-link disabled">Отключенная</a></li></ul><formclass="d-flex"role="search"><inputclass="form-control me-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success"type="submit">Поиск</button></form></div></div></nav>

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

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

html
<divclass="collapse"id="navbarToggleExternalContent"><divclass="bg-dark p-4"><h5class="text-white h4">Свернутый контент</h5><spanclass="text-body-secondary">Переключаемый через бренд навигационной панели.</span></div></div><navclass="navbar navbar-dark bg-dark"><divclass="container-fluid"><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarToggleExternalContent"aria-controls="navbarToggleExternalContent"aria-expanded="false"aria-label="Переключатель навигации"><spanclass="navbar-toggler-icon"></span></button></div></nav>

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

Offcanvas

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

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

html
<navclass="navbar bg-body-tertiary fixed-top"><divclass="container-fluid"><aclass="navbar-brand"href="#">Навигационная панель Offcanvas</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="offcanvas"data-bs-target="#offcanvasNavbar"aria-controls="offcanvasNavbar"><spanclass="navbar-toggler-icon"></span></button><divclass="offcanvas offcanvas-end"tabindex="-1"id="offcanvasNavbar"aria-labelledby="offcanvasNavbarLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasNavbarLabel">Offcanvas</h5><buttontype="button"class="btn-close"data-bs-dismiss="offcanvas"aria-label="Закрыть"></button></div><divclass="offcanvas-body"><ulclass="navbar-nav justify-content-end flex-grow-1 pe-3"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Главная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"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><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li></ul></li></ul><formclass="d-flex mt-3"role="search"><inputclass="form-control me-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success"type="submit">Поиск</button></form></div></div></div></nav>

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

<navclass="navbar navbar-expand-lg bg-body-tertiary fixed-top"><aclass="navbar-brand"href="#">Offcanvas navbar</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="offcanvas"data-bs-target="#navbarOffcanvasLg"aria-controls="navbarOffcanvasLg"><spanclass="navbar-toggler-icon"></span></button><divclass="offcanvas offcanvas-end"tabindex="-1"id="navbarOffcanvasLg"aria-labelledby="navbarOffcanvasLgLabel"> ...
</div></nav>

При использовании offcanvas на темной панели навигации имейте в виду, что вам может потребоваться темный фон для содержимого offcanvas, чтобы текст не становился неразборчивым. В приведенном ниже примере мы добавляем .navbar-dark и .bg-dark к .navbar, .text-bg-dark к .offcanvas, .dropdown-menu-dark в .dropdown-menu, а .btn-close-white в .btn-close для правильной стилизации с темным фоном.

html
<navclass="navbar navbar-dark bg-dark fixed-top"><divclass="container-fluid"><aclass="navbar-brand"href="#">Offcanvas темная навигационная панель</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="offcanvas"data-bs-target="#offcanvasDarkNavbar"aria-controls="offcanvasDarkNavbar"><spanclass="navbar-toggler-icon"></span></button><divclass="offcanvas offcanvas-end text-bg-dark"tabindex="-1"id="offcanvasDarkNavbar"aria-labelledby="offcanvasDarkNavbarLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasDarkNavbarLabel">Темный offcanvas</h5><buttontype="button"class="btn-close btn-close-white"data-bs-dismiss="offcanvas"aria-label="Close"></button></div><divclass="offcanvas-body"><ulclass="navbar-nav justify-content-end flex-grow-1 pe-3"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Главная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"role="button"data-bs-toggle="dropdown"aria-expanded="false"> Выпадающий список
</a><ulclass="dropdown-menu dropdown-menu-dark"><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></li></ul><formclass="d-flex mt-3"role="search"><inputclass="form-control me-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-success"type="submit">Поиск</button></form></div></div></div></nav>

CSS

Переменные

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

В рамках развивающегося подхода Bootstrap к переменным CSS панели навигации теперь используют локальные переменные CSS в .navbar для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

scss/_navbar.scss
--#{$prefix}navbar-padding-x:#{if($navbar-padding-x==null,0,$navbar-padding-x)};--#{$prefix}navbar-padding-y:#{$navbar-padding-y};--#{$prefix}navbar-color:#{$navbar-light-color};--#{$prefix}navbar-hover-color:#{$navbar-light-hover-color};--#{$prefix}navbar-disabled-color:#{$navbar-light-disabled-color};--#{$prefix}navbar-active-color:#{$navbar-light-active-color};--#{$prefix}navbar-brand-padding-y:#{$navbar-brand-padding-y};--#{$prefix}navbar-brand-margin-end:#{$navbar-brand-margin-end};--#{$prefix}navbar-brand-font-size:#{$navbar-brand-font-size};--#{$prefix}navbar-brand-color:#{$navbar-light-brand-color};--#{$prefix}navbar-brand-hover-color:#{$navbar-light-brand-hover-color};--#{$prefix}navbar-nav-link-padding-x:#{$navbar-nav-link-padding-x};--#{$prefix}navbar-toggler-padding-y:#{$navbar-toggler-padding-y};--#{$prefix}navbar-toggler-padding-x:#{$navbar-toggler-padding-x};--#{$prefix}navbar-toggler-font-size:#{$navbar-toggler-font-size};--#{$prefix}navbar-toggler-icon-bg:#{escape-svg($navbar-light-toggler-icon-bg)};--#{$prefix}navbar-toggler-border-color:#{$navbar-light-toggler-border-color};--#{$prefix}navbar-toggler-border-radius:#{$navbar-toggler-border-radius};--#{$prefix}navbar-toggler-focus-width:#{$navbar-toggler-focus-width};--#{$prefix}navbar-toggler-transition:#{$navbar-toggler-transition};

Некоторые дополнительные переменные CSS также присутствуют в .navbar-nav:

scss/_navbar.scss
--#{$prefix}nav-link-padding-x:0;--#{$prefix}nav-link-padding-y:#{$nav-link-padding-y};@include rfs($nav-link-font-size,--#{$prefix}nav-link-font-size);--#{$prefix}nav-link-font-weight:#{$nav-link-font-weight};--#{$prefix}nav-link-color:var(--#{$prefix}navbar-color);--#{$prefix}nav-link-hover-color:var(--#{$prefix}navbar-hover-color);--#{$prefix}nav-link-disabled-color:var(--#{$prefix}navbar-disabled-color);

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

scss/_navbar.scss
--#{$prefix}navbar-color:#{$navbar-dark-color};--#{$prefix}navbar-hover-color:#{$navbar-dark-hover-color};--#{$prefix}navbar-disabled-color:#{$navbar-dark-disabled-color};--#{$prefix}navbar-active-color:#{$navbar-dark-active-color};--#{$prefix}navbar-brand-color:#{$navbar-dark-brand-color};--#{$prefix}navbar-brand-hover-color:#{$navbar-dark-brand-hover-color};--#{$prefix}navbar-toggler-border-color:#{$navbar-dark-toggler-border-color};--#{$prefix}navbar-toggler-icon-bg:#{escape-svg($navbar-dark-toggler-icon-bg)};

Переменные Sass

Переменные для всех навигационных панелей:

scss/_variables.scss
$navbar-padding-y:$spacer*.5;$navbar-padding-x:null;$navbar-nav-link-padding-x:.5rem;$navbar-brand-font-size:$font-size-lg;// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:$font-size-base*$line-height-base+$nav-link-padding-y*2;$navbar-brand-height:$navbar-brand-font-size*$line-height-base;$navbar-brand-padding-y:($nav-link-height-$navbar-brand-height)*.5;$navbar-brand-margin-end:1rem;$navbar-toggler-padding-y:.25rem;$navbar-toggler-padding-x:.75rem;$navbar-toggler-font-size:$font-size-lg;$navbar-toggler-border-radius:$btn-border-radius;$navbar-toggler-focus-width:$btn-focus-width;$navbar-toggler-transition:box-shadow.15sease-in-out;$navbar-light-color:rgba(var(--#{$prefix}emphasis-color-rgb),.65);$navbar-light-hover-color:rgba(var(--#{$prefix}emphasis-color-rgb),.8);$navbar-light-active-color:rgba(var(--#{$prefix}emphasis-color-rgb),1);$navbar-light-disabled-color:rgba(var(--#{$prefix}emphasis-color-rgb),.3);$navbar-light-icon-color:rgba($body-color,.75);$navbar-light-toggler-icon-bg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");$navbar-light-toggler-border-color:rgba(var(--#{$prefix}emphasis-color-rgb),.15);$navbar-light-brand-color:$navbar-light-active-color;$navbar-light-brand-hover-color:$navbar-light-active-color;

Переменные для темной панели навигации:

scss/_variables.scss
$navbar-dark-color:rgba($white,.55);$navbar-dark-hover-color:rgba($white,.75);$navbar-dark-active-color:$white;$navbar-dark-disabled-color:rgba($white,.25);$navbar-dark-icon-color:$navbar-dark-color;$navbar-dark-toggler-icon-bg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");$navbar-dark-toggler-border-color:rgba($white,.1);$navbar-dark-brand-color:$navbar-dark-active-color;$navbar-dark-brand-hover-color:$navbar-dark-active-color;

Циклы Sass

Классы адаптивного навбара развертывания/свертывания (например, .navbar-expand-lg) объединяются с картой $breakpoints и генерируются с помощью цикла в scss/_navbar.scss.

scss/_navbar.scss
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand{@each$breakpointinmap-keys($grid-breakpoints){$next:breakpoint-next($breakpoint,$grid-breakpoints);$infix:breakpoint-infix($next,$grid-breakpoints);// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix}{@include media-breakpoint-up($next){flex-wrap:nowrap;justify-content:flex-start;.navbar-nav{flex-direction:row;.dropdown-menu{position:absolute;}.nav-link{padding-right:var(--#{$prefix}navbar-nav-link-padding-x);padding-left:var(--#{$prefix}navbar-nav-link-padding-x);}}.navbar-nav-scroll{overflow:visible;}.navbar-collapse{display:flex!important;// stylelint-disable-line declaration-no-important
flex-basis:auto;}.navbar-toggler{display:none;}.offcanvas{// stylelint-disable declaration-no-important
position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;@include box-shadow(none);@include transition(none);// stylelint-enable declaration-no-important
.offcanvas-header{display:none;}.offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;}}}}}}