Перейти к основному контенту Перейти к навигации документации
Просмотреть на GitHub

Навигация и вкладки

Документация и примеры по использованию встроенных компонентов навигации Bootstrap.

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

Базовая навигация

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

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

Базовый компонент .nav не включает никакого состояния .active. Следующие примеры включают этот класс, в основном для демонстрации того, что этот конкретный класс не вызывает никакого специального стилизования.

Для передачи активного состояния вспомогательным технологиям используйте атрибут aria-current — используйте значение page для текущей страницы или true для текущего элемента в наборе.

html 
<ul class="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">Отключено</a>
  </li>
</ul>

Классы используются повсюду, поэтому ваша разметка может быть очень гибкой. Используйте <ul>, как показано выше, <ol>, если порядок ваших элементов важен, или создайте свою собственную с элементом <nav>. Поскольку .nav использует display: flex, ссылки навигации ведут себя так же, как элементы навигации, но без дополнительной разметки.

html 
<nav class="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">Отключено</a>
</nav>

Доступные стили

Измените стиль компонента .nav с помощью модификаторов и утилит. Комбинируйте и сочетайте по мере необходимости или создайте свои собственные.

Горизонтальное выравнивание

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

Центрированные с .justify-content-center:

html 
<ul class="nav justify-content-center">
  <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">Отключено</a>
  </li>
</ul>

Выровненные по правому краю с .justify-content-end:

html 
<ul class="nav justify-content-end">
  <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">Отключено</a>
  </li>
</ul>

Вертикальная

Сложите вашу навигацию, изменив направление flex-элемента с помощью утилиты .flex-column. Нужно сложить их на некоторых областях просмотра, но не на других? Используйте адаптивные версии (например, .flex-sm-column).

html 
<ul class="nav flex-column">
  <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">Отключено</a>
  </li>
</ul>

Как всегда, вертикальная навигация возможна и без <ul>.

html 
<nav class="nav flex-column">
  <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">Отключено</a>
</nav>

Вкладки

Берет базовую навигацию сверху и добавляет класс .nav-tabs для создания интерфейса с вкладками. Используйте их для создания областей с вкладками с помощью нашего JavaScript плагина вкладок.

html 
<ul class="nav nav-tabs">
  <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">Отключено</a>
  </li>
</ul>

Пилюли

Возьмите тот же HTML, но используйте .nav-pills вместо этого:

html 
<ul class="nav nav-pills">
  <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">Отключено</a>
  </li>
</ul>

Подчеркивание

Возьмите тот же HTML, но используйте .nav-underline вместо этого:

html 
<ul class="nav nav-underline">
  <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">Отключено</a>
  </li>
</ul>

Заполнение и выравнивание

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

html 
<ul class="nav nav-pills nav-fill">
  <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">Отключено</a>
  </li>
</ul>

При использовании навигации на основе <nav> вы можете безопасно опустить .nav-item, так как для стилизования элементов <a> требуется только .nav-link.

html 
<nav class="nav nav-pills nav-fill">
  <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">Отключено</a>
</nav>

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

html 
<ul class="nav nav-pills nav-justified">
  <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">Отключено</a>
  </li>
</ul>

Аналогично примеру .nav-fill с использованием навигации на основе <nav>.

html 
<nav class="nav nav-pills nav-justified">
  <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">Отключено</a>
</nav>

Работа с утилитами flex

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

html 
<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Активная</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Более длинная ссылка навигации</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Ссылка</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" aria-disabled="true">Отключено</a>
</nav>

О доступности

Если вы используете навигацию для создания панели навигации, обязательно добавьте атрибут role="navigation" к наиболее логичному родительскому контейнеру для <ul>, либо оберните всю навигацию в элемент <nav>. Не добавляйте этот атрибут непосредственно к самому <ul>, так как это помешает вспомогательным технологиям распознавать его как настоящий список.

Обратите внимание, что панели навигации, даже если они визуально стилизованы как вкладки с классом .nav-tabs, не должны получать атрибуты role="tablist", role="tab" или role="tabpanel". Они подходят только для динамических интерфейсов с вкладками, как описано в руководстве по практикам создания ARIA, паттерн вкладок. См. JavaScript поведение для динамических интерфейсов с вкладками в этом разделе для примера. Атрибут aria-current не нужен для динамических интерфейсов с вкладками, поскольку наш JavaScript обрабатывает выбранное состояние, добавляя aria-selected="true" на активную вкладку.

Использование выпадающих списков

Добавьте выпадающие меню с небольшим дополнительным HTML и JavaScript плагином выпадающих списков.

Вкладки с выпадающими списками

html 
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Активная</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Выпадающий список</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Действие</a></li>
      <li><a class="dropdown-item" href="#">Другое действие</a></li>
      <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Отделенная ссылка</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Отключено</a>
  </li>
</ul>

Пилюли с выпадающими списками

html 
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Активная</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Выпадающий список</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Действие</a></li>
      <li><a class="dropdown-item" href="#">Другое действие</a></li>
      <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Отделенная ссылка</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Отключено</a>
  </li>
</ul>

CSS

Переменные

Добавлено в v5.2.0

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

На базовом классе .nav:

scss/_nav.scss 
--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
--#{$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: #{$nav-link-color};
--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

На модификаторе класса .nav-tabs:

scss/_nav.scss 
--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

На модификаторе класса .nav-pills:

scss/_nav.scss 
--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
Добавлено в v5.3.0

На модификаторе класса .nav-underline:

scss/_nav.scss 
--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};

Sass переменные

scss/_variables.scss 
$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           var(--#{$prefix}secondary-color);
$nav-link-focus-box-shadow:         $focus-ring-box-shadow;

$nav-tabs-border-color:             var(--#{$prefix}border-color);
$nav-tabs-border-width:             var(--#{$prefix}border-width);
$nav-tabs-border-radius:            var(--#{$prefix}border-radius);
$nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color;
$nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color);
$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg);
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg;

$nav-pills-border-radius:           var(--#{$prefix}border-radius);
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

$nav-underline-gap:                 1rem;
$nav-underline-border-width:        .125rem;
$nav-underline-link-active-color:   var(--#{$prefix}emphasis-color);

JavaScript поведение

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

Это пример содержимого, связанного с вкладкой Главная. Нажатие на другую вкладку переключит видимость этой для следующего раза. JavaScript вкладок меняет классы для управления видимостью и стилизацией содержимого. Вы можете использовать это с вкладками, пилюлями и любой другой навигацией на основе .nav.

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

Это пример содержимого, связанного с вкладкой Контакты. Нажатие на другую вкладку переключит видимость этой для следующего раза. JavaScript вкладок меняет классы для управления видимостью и стилизацией содержимого. Вы можете использовать это с вкладками, пилюлями и любой другой навигацией на основе .nav.

Это пример содержимого, связанного с отключенной вкладкой.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Главная</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Профиль</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Контакты</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Отключено</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

Чтобы помочь удовлетворить ваши потребности, это работает с разметкой на основе <ul>, как показано выше, или с любой произвольной разметкой "создай свою собственную". Обратите внимание, что если вы используете <nav>, вы не должны добавлять role="tablist" непосредственно к нему, так как это переопределит собственную роль элемента как ориентира навигации. Вместо этого переключитесь на альтернативный элемент (в примере ниже, простой <div>) и оберните <nav> вокруг него.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Главная</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Профиль</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Контакты</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Отключено</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Плагин вкладок также работает с пилюлями.

Это пример содержимого, связанного с вкладкой Главная. Нажатие на другую вкладку переключит видимость этой для следующего раза. JavaScript вкладок меняет классы для управления видимостью и стилизацией содержимого. Вы можете использовать это с вкладками, пилюлями и любой другой навигацией на основе .nav.

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

Это пример содержимого, связанного с вкладкой Контакты. Нажатие на другую вкладку переключит видимость этой для следующего раза. JavaScript вкладок меняет классы для управления видимостью и стилизацией содержимого. Вы можете использовать это с вкладками, пилюлями и любой другой навигацией на основе .nav.

Это пример содержимого, связанного с отключенной вкладкой.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Главная</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Профиль</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Контакты</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Отключено</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

А также с вертикальными пилюлями. В идеале для вертикальных вкладок вы также должны добавить aria-orientation="vertical" к контейнеру списка вкладок.

Это пример содержимого, связанного с вкладкой Главная. Нажатие на другую вкладку переключит видимость этой для следующего раза. JavaScript вкладок меняет классы для управления видимостью и стилизацией содержимого. Вы можете использовать это с вкладками, пилюлями и любой другой навигацией на основе .nav.

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

Это пример содержимого, связанного с отключенной вкладкой.

Это пример содержимого, связанного с вкладкой Сообщения. Нажатие на другую вкладку переключит видимость этой для следующего раза. JavaScript вкладок меняет классы для управления видимостью и стилизацией содержимого. Вы можете использовать это с вкладками, пилюлями и любой другой навигацией на основе .nav.

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

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Главная</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Профиль</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Отключено</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Сообщения</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Настройки</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Доступность

Динамические интерфейсы с вкладками, как описано в руководстве по практикам создания ARIA, паттерн вкладок, требуют role="tablist", role="tab", role="tabpanel", и дополнительные атрибуты aria- для передачи их структуры, функциональности и текущего состояния пользователям вспомогательных технологий (таких как программы чтения с экрана). В качестве лучшей практики мы рекомендуем использовать элементы <button> для вкладок, поскольку это элементы управления, которые запускают динамическое изменение, а не ссылки, которые ведут на новую страницу или местоположение.

В соответствии с паттерном ARIA Authoring Practices только текущая активная вкладка получает фокус клавиатуры. Когда JavaScript плагин инициализируется, он установит tabindex="-1" на всех неактивных элементах управления вкладками. Как только текущая активная вкладка получает фокус, клавиши курсора активируют предыдущую/следующую вкладку. Клавиши Home и End активируют первую и последнюю вкладки соответственно. Плагин изменит перемещающийся tabindex соответственно. Однако обратите внимание, что JavaScript плагин не различает горизонтальные и вертикальные списки вкладок, когда дело доходит до взаимодействий клавиш курсора: независимо от ориентации списка вкладок, и вверх и влево курсор переходят к предыдущей вкладке, а вниз и вправо курсор переходят к следующей вкладке.

В общем, чтобы облегчить навигацию клавиатурой, рекомендуется также сделать сами панели вкладок фокусируемыми, если только первый элемент, содержащий значимое содержимое внутри панели вкладок, уже не является фокусируемым. JavaScript плагин не пытается обрабатывать этот аспект — где это уместно, вам нужно будет явно сделать ваши панели вкладок фокусируемыми, добавив tabindex="0" в вашу разметку.

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

Using data attributes

Вы можете активировать навигацию вкладок или пилюль без написания JavaScript, просто указав data-bs-toggle="tab" или data-bs-toggle="pill" на элементе. Используйте эти атрибуты данных на .nav-tabs или .nav-pills.

<!-- Вкладки навигации -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Главная</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Профиль</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Сообщения</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Настройки</button>
  </li>
</ul>

<!-- Панели вкладок -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Через JavaScript

Включите вкладки с возможность переключения через JavaScript (каждая вкладка должна быть активирована индивидуально):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Вы можете активировать отдельные вкладки несколькими способами:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Выбрать вкладку по имени

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Выбрать первую вкладку

Эффект затухания

Чтобы сделать вкладки затухающими, добавьте .fade к каждой .tab-pane. Первая панель вкладки также должна иметь .show, чтобы сделать исходное содержимое видимым.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Методы

Все API методы являются асинхронными и запускают переход. Они возвращаются к вызывающему коду сразу после начала перехода, но до его завершения. Кроме того, вызов метода на компоненте, который уже находится в процессе перехода, будет проигнорирован. Узнайте больше в нашей документации по JavaScript.

Активирует ваше содержимое как элемент вкладки.

Вы можете создать экземпляр вкладки с помощью конструктора, например:

const bsTab = new bootstrap.Tab('#myTab')
МетодОписание
disposeУничтожает вкладку элемента.
getInstanceСтатический метод, который позволяет получить экземпляр вкладки, связанный с DOM-элементом, вы можете использовать его так: bootstrap.Tab.getInstance(element).
getOrCreateInstanceСтатический метод, который возвращает экземпляр вкладки, связанный с DOM-элементом, или создает новый, если он не был инициализирован. Вы можете использовать его так: bootstrap.Tab.getOrCreateInstance(element).
showВыбирает данную вкладку и отображает ее связанную панель. Любая другая вкладка, которая ранее была выбрана, становится невыбранной и ее связанная панель скрывается. Возвращает вызывающему коду до того, как панель вкладки фактически будет показана (т.е. до возникновения события shown.bs.tab).

События

При отображении новой вкладки, события срабатывают в следующем порядке:

  1. hide.bs.tab (на текущей активной вкладке)
  2. show.bs.tab (на только что отображаемой вкладке)
  3. hidden.bs.tab (на предыдущей активной вкладке, той же, что и для события hide.bs.tab)
  4. shown.bs.tab (на новой активной только что отображаемой вкладке, той же, что и для события show.bs.tab)

Если ни одна вкладка не была активной, то события hide.bs.tab и hidden.bs.tab не будут срабатывать.

Тип событияОписание
hide.bs.tabЭто событие срабатывает, когда новая вкладка будет показана (и, следовательно, предыдущая активная вкладка будет скрыта). Используйте event.target и event.relatedTarget для выбора текущей активной вкладки и новой будущей активной вкладки, соответственно.
hidden.bs.tabЭто событие срабатывает после того, как новая вкладка будет показана (и, следовательно, предыдущая активная вкладка будет скрыта). Используйте event.target и event.relatedTarget для выбора предыдущей активной вкладки и новой активной вкладки, соответственно.
show.bs.tabЭто событие срабатывает при отображении вкладки, но до того, как новая вкладка будет показана. Используйте event.target и event.relatedTarget для выбора активной вкладки и предыдущей активной вкладки (если они доступны), соответственно.
shown.bs.tabЭто событие срабатывает при отображении вкладки после того, как вкладка была показана. Используйте event.target и event.relatedTarget для выбора активной вкладки и предыдущей активной вкладки (если они доступны), соответственно.
const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // новая активированная вкладка
  event.relatedTarget // предыдущая активная вкладка
})