Навигация Bootstrap 5

меню навигации

Если нужно создать простое горизонтальное меню, добавьте .nav класс добавлен к <ul> элементы, затем для каждого <li> элементы добавляются .nav-item и добавить .nav-link класс добавляется к их ссылкам:

Пример

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Отключен</a>
  </li>
</ul>

Попробуйте сами

выравнивание навигационной панели

добавить .justify-content-center класс выравнивает навигацию по центру, добавить .justify-content-end класс выравнивает навигацию по правому краю.

Пример

<!-- Выравнивание навигации по центру -->
<ul class="nav justify-content-center">
<!-- Выравнивание навигации по правому краю -->
<ul class="nav justify-content-end">

Попробуйте сами

вертикальная навигационная панель

добавить .flex-column класс может создать вертикальную навигацию:

Пример

<ul class="nav flex-column">

Попробуйте сами

вкладки

Используйте .nav-tabs класс преобразует навигационное меню в навигационные вкладки. И добавьте .active класс добавлен к активной/текущей ссылке. Если вы хотите, чтобы вкладки были переключаемыми, см. последний пример на этой странице.

Пример

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" 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" href="#">Отключен</a>
  </li>
</ul>

Попробуйте сами

капсулы

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

Пример

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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" href="#">Отключен</a>
  </li>
</ul>

Попробуйте сами

равномерные вкладки/капсульные навигации

Используйте .nav-justified класс (равномерная ширина) для выравнивания вкладок/капсул:

Пример

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

Попробуйте сами

капсульное выпадающее меню

Пример

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активный</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Выпадающее меню</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Ссылка 1</a></li>
      <li><a class="dropdown-item" href="#">Ссылка 2</a></li>
      <li><a class="dropdown-item" href="#">Ссылка 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Отключен</a>
  </li>
</ul>

Попробуйте сами

выпадающее меню вкладок

Пример

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активный</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Выпадающее меню</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Ссылка 1</a></li>
      <li><a class="dropdown-item" href="#">Ссылка 2</a></li>
      <li><a class="dropdown-item" href="#">Ссылка 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Отключен</a>
  </li>
</ul>

Попробуйте сами

переключаемые / динамические вкладки

Чтобы сделать вкладки переключаемыми, добавьте data-toggle="tab" свойство добавлено к каждому ссылке. Затем добавьте уникальный ID к каждой вкладке. .tab-pane классы, и包裹在带有 .tab-content класс <div> в элемент.

Если вы хотите, чтобы вкладки могли淡入淡出 при нажатии, добавьте .fade класс добавлен к .tab-pane：

Пример

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Дом</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Меню 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Меню 2</a>
  </li>
</ul>
<!-- Панели вкладок -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

Попробуйте сами

Переключаемые / динамические капсулы навигации

Тот же код применяется для навигации; просто измените атрибут data-toggle на data-toggle="pill" Просто:

Пример

<!-- Навигационный капсул -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">Весна</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">Раннее лето</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">Шанхайская прогулка</a>
  </li>
</ul>
<!-- Вкладка окна -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

Попробуйте сами