in English

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

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

Як це працює

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

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

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

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

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

Бренд

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

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

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

Додавання зображень до .navbar-brandзавжди потребуватиме спеціальних стилів або утиліт для відповідного розміру. Ось кілька прикладів для демонстрації.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/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-links або їхніх безпосередніх батьків .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Форми

Розмістіть різні елементи керування формою та компоненти на панелі навігації за допомогою .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

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

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Групи введення також працюють:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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="form-inline">
    <button class="btn btn-outline-success" 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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</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>

Контейнери

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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">
  <a class="navbar-brand" href="#">Default</a>
</nav>

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

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

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Прокручування

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

Будь ласка, зверніть увагу, що ця поведінка має потенційний недолік — overflowколи налаштування overflow-y: auto(потрібно прокручувати вміст тут) overflow-xє еквівалентом auto, який обрізає деякий горизонтальний вміст.

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <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">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

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

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

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

Перемикач

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

Без .navbar-brandвідображення найменшої точки розриву:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

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

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

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

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

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