Source

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

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

Як це працює

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

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

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

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

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

.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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#">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.1/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.1/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" href="#">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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: 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>

Контейнери

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

<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-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" href="#">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" href="#">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" href="#">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>

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

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

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <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>