Cмотреть на GitHub

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

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

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

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

  • Навбары требуют «обертки» из классов .navbar и .navbar-expand{-sm|-md|-lg|-xl} для отзывчивости при «складывании»и классы , а также классы цветовых схем.
  • Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
  • Используйте наши классы отступов и «флекс» для контроля над пространством и выравниванием внутри навбаров.
  • Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
  • Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar. Смотрите утилиты отображения элементов.
  • Придайте им доступность использованием элемента <nav>, или, если используется менее специфический элемент – например <div>: добавьте role="navigation" в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.

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

Поддерживаемые типы содержимого

В навбарах присутствуют встроенная поддержка многих суб-компонентов. Выбирайте нужный:

  • .navbar-brand для названия вашей компании, продукта или имени проекта.
  • .navbar-nav для навигации полной высоты (включая выпадающие элементы).
  • .navbar-toggler для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации.
  • .form-inline для любых органов контроля форм и действий с ними.
  • .navbar-text для добавления вертикально центрированных строк текста.
  • .collapse.navbar-collapse для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.

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

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Панель навигации</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">Главная <spanclass="sr-only">(текущая)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdown"role="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Выпадающий список </a><divclass="dropdown-menu"aria-labelledby="navbarDropdown"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Что-то еще здесь</a></div></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Отключенный</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Поиск</button></form></div></nav>

В этом примере использованы классы цветаbg-light и спейсингаmy-2, my-lg-0, mr-sm-0, my-sm-0.

Бренд

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

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

Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.

<!-- Просто изображение --><navclass="navbar navbar-light bg-light"><aclass="navbar-brand"href="#"><imgsrc="/docs/4.6/assets/brand/bootstrap-solid.svg"width="30"height="30"alt=""></a></nav>
<!-- Изображение и текст --><navclass="navbar navbar-light bg-light"><aclass="navbar-brand"href="#"><imgsrc="/docs/4.6/assets/brand/bootstrap-solid.svg"width="30"height="30"class="d-inline-block align-top"alt=""> Bootstrap </a></nav>

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

Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item.

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Панель навигации</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 active"><aclass="nav-link"href="#">Главная <spanclass="sr-only">(текущая)</span></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"href="#"tabindex="-1"aria-disabled="true">Отключенный</a></li></ul></div></nav>

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

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Панель навигации</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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"href="#">Главная <spanclass="sr-only">(текущая)</span></a><aclass="nav-link"href="#">Функции</a><aclass="nav-link"href="#">Цены</a><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Отключенный</a></div></div></nav>

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

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Панель навигации</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 active"><aclass="nav-link"href="#">Главная <spanclass="sr-only">(текущая)</span></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="#"id="navbarDropdownMenuLink"role="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Ссылка выпадающий список </a><divclass="dropdown-menu"aria-labelledby="navbarDropdownMenuLink"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a></div></li></ul></div></nav>

Формы

Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс .form-inline.

<navclass="navbar navbar-light bg-light"><formclass="form-inline"><inputclass="form-control mr-sm-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Поиск</button></form></nav>

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

<navclass="navbar navbar-light bg-light"><aclass="navbar-brand">Панель навигации</a><formclass="form-inline"><inputclass="form-control mr-sm-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Поиск</button></form></nav>

Группы ввода тоже работают:

<navclass="navbar navbar-light bg-light"><formclass="form-inline"><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="basic-addon1">@</span></div><inputtype="text"class="form-control"placeholder="Имя пользователя"aria-label="Имя пользователя"aria-describedby="basic-addon1"></div></form></nav>

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

<navclass="navbar navbar-light bg-light"><formclass="form-inline"><buttonclass="btn btn-outline-success"type="button">Главная кнопка</button><buttonclass="btn btn-sm btn-outline-secondary"type="button">Маленькая кнопка</button></form></nav>

Текст

Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.

<navclass="navbar navbar-light bg-light"><spanclass="navbar-text"> Текст на панели навигации со встроенным элементом </span></nav>

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

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Панель навигации с текстом</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">Главная <spanclass="sr-only">(текущая)</span></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></nav>

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

Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color. Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-*.

<navclass="navbar navbar-dark bg-dark"><!-- Контент навигационной панели --></nav><navclass="navbar navbar-dark bg-primary"><!-- Контент навигационной панели --></nav><navclass="navbar navbar-light"style="background-color: #e3f2fd;"><!-- Контент навигационной панели --></nav>

Контейнеры

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

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

Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand{-sm|-md|-lg|-xl}. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.

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

Размещение

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

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

<navclass="navbar navbar-light bg-light"><aclass="navbar-brand"href="#">По умолчанию</a></nav>
<navclass="navbar fixed-top navbar-light bg-light"><aclass="navbar-brand"href="#">Зафиксирован вверху</a></nav>
<navclass="navbar fixed-bottom navbar-light bg-light"><aclass="navbar-brand"href="#">Зафиксирован внизу</a></nav>
<navclass="navbar sticky-top navbar-light bg-light"><aclass="navbar-brand"href="#">Приклеен вверху</a></nav>

Прокрутка

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

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

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

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Прокрутка навигационной панели</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarScroll"aria-controls="navbarScroll"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarScroll"><ulclass="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll"style="max-height: 100px;"><liclass="nav-item active"><aclass="nav-link"href="#">Главная <spanclass="sr-only">(текущая)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarScrollingDropdown"role="button"data-toggle="dropdown"aria-expanded="false"> Link </a><ulclass="dropdown-menu"aria-labelledby="navbarScrollingDropdown"><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"><inputclass="form-control mr-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success"type="submit">ИСкать</button></form></div></nav>

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

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

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

Тогглер (кнопка разворачивания меню)

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

Без показанного элемента класса .navbar-brand, на самых маленьких брейкпойнтах:

<navclass="navbar navbar-expand-lg navbar-light bg-light"><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto mt-2 mt-lg-0"><liclass="nav-item active"><aclass="nav-link"href="#">Главная <spanclass="sr-only">(текущая)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Отключенный</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Поиск</button></form></div></nav>

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

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Панель навигации</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto mt-2 mt-lg-0"><liclass="nav-item active"><aclass="nav-link"href="#">Главная <spanclass="sr-only">(текущая)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Отключенный</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Поиск"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Поиск</button></form></div></nav>

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

<navclass="navbar navbar-expand-lg navbar-light bg-light"><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto mt-2 mt-lg-0"><liclass="nav-item active"><aclass="nav-link"href="#">Главная <spanclass="sr-only">(текущая)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Отключенный</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Поиск</button></form></div></nav>

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

Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через id и data-target – вам будет легко это сделать!

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

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