Навігаційна панель

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

На цій сторінці

Як це працює

Ось що вам потрібно знати, перш ніж почати роботу з панеллю навігації:

Панелі навігацій потребують обгортання .navbarдля .navbar-expand{-sm|-md|-lg|-xl|-xxl}адаптивного згортання та класів колірної схеми .
Навігаційні панелі та їх вміст плавні за замовчуванням. Змініть контейнер , щоб обмежити його горизонтальну ширину різними способами.
Використовуйте наші службові класи spacing і flex для керування інтервалами та вирівнюванням у панелях навігації.
Навігаційні панелі реагують за замовчуванням, але ви можете легко змінити їх, щоб змінити це. Відповідна поведінка залежить від нашого плагіна Collapse JavaScript.
Забезпечте доступність за допомогою <nav>елемента або, якщо використовується більш загальний елемент, як-от <div>, додайте role="navigation"до кожної навігаційної панелі, щоб чітко визначити її як орієнтир для користувачів допоміжних технологій.
Укажіть поточний елемент за допомогою aria-current="page"для поточної сторінки або aria-current="true"для поточного елемента в наборі.

Ефект анімації цього компонента залежить від prefers-reduced-motionмедіа-запиту. Перегляньте розділ про обмежений рух нашої документації щодо спеціальних можливостей .

Підтримуваний вміст

Панелі навігації мають вбудовану підтримку кількох підкомпонентів. За потреби виберіть із наведеного нижче.

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

Ось приклад усіх підкомпонентів, включених у адаптивну світлову панель навігації, яка автоматично згортається в lg(великій) точці зупину.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

У цьому прикладі використовуються службові класи фону ( bg-light) і інтервалу ( my-2, my-lg-0, me-sm-0, ).my-sm-0

Бренд

Можна .navbar-brandзастосувати до більшості елементів, але прив’язка працює найкраще, оскільки для деяких елементів можуть знадобитися службові класи або спеціальні стилі.

текст

Додайте свій текст до елемента з .navbar-brandкласом.

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

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

Зображення

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

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

Зображення і текст

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

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

нав

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

Додайте .activeклас, .nav-linkщоб вказати поточну сторінку.

Будь ласка, зверніть увагу, що ви також повинні додати aria-currentатрибут до active .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

І оскільки ми використовуємо класи для наших навігацій, ви можете повністю уникнути підходу на основі списків, якщо хочете.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

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

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

Форми

Розмістіть різні елементи керування формою та компоненти на навігаційній панелі:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Безпосередні дочірні елементи .navbarвикористовують гнучкий макет і за замовчуванням justify-content: space-between. За потреби використовуйте додаткові утиліти flex , щоб налаштувати цю поведінку.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Різні кнопки також підтримуються як частина цих форм панелі навігації. Це також чудове нагадування про те, що утиліти вертикального вирівнювання можна використовувати для вирівнювання елементів різного розміру.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

текст

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

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

За потреби змішуйте та поєднуйте з іншими компонентами та утилітами.

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

Кольорові схеми

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

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

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

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

Контейнери

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

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

Використовуйте будь-який адаптивний контейнер, щоб змінити ширину представлення вмісту на панелі навігації.

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

Розміщення

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

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

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

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

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

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</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;"деякими додатковими утилітами полів для оптимального інтервалу.

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

Чуйна поведінка

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

Для навігаційних панелей, які ніколи не згортаються, додайте .navbar-expandклас на навігаційну панель. Для навігаційних панелей, які завжди згортаються, не додавайте жодного .navbar-expandкласу.

Перемикач

Перемикачі навігаційної панелі за замовчуванням вирівняні за лівим краєм, але якщо вони слідують за однорідним елементом, наприклад .navbar-brand, вони автоматично вирівняються за правим кутом. Скасування вашої розмітки змінить розташування перемикача. Нижче наведено приклади різних стилів перемикання.

Не .navbar-brandпоказано на найменшій точці розриву:

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

З назвою бренду ліворуч і перемикачем праворуч:

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

З перемикачем ліворуч і назвою бренду праворуч:

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

Зовнішній вміст

Іноді потрібно використовувати плагін згортання, щоб ініціювати елемент контейнера для вмісту, який структурно знаходиться за межами .navbar. Оскільки наш плагін працює над idі data-bs-targetвідповідністю, це легко зробити!

Згорнутий вміст

Перемикання через навігаційну панель.

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

Коли ви це зробите, ми рекомендуємо включити додатковий JavaScript, щоб програмно перемістити фокус до контейнера, коли він відкривається. Інакше користувачам клавіатури та допоміжних технологій, ймовірно, буде важко знайти щойно відкритий вміст, особливо якщо відкритий контейнер знаходиться перед перемикачем у структурі документа. Ми також рекомендуємо переконатися, що перемикач має aria-controlsатрибут, який вказує на idконтейнер вмісту. Теоретично це дозволяє користувачам допоміжних технологій переходити безпосередньо від перемикача до контейнера, яким він керує, але підтримка цього наразі досить неоднозначна.

Сасс

Змінні

$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 .15s ease-in-out;

$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-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-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-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$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-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Петля

Чуйні класи розширення/згортання навігаційної панелі (наприклад, .navbar-expand-lg) поєднуються з $breakpointsкартою та генеруються через цикл у scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-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: $navbar-nav-link-padding-x;
            padding-left: $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;
        }
      }
    }
  }
}