Меню сайта в Bootstrap 4 (navbar)

Navbar - это простая оболочка для размещения логотипа, навигации и других основных элементов в заголовке страницы. Этот объект так же называют шапкой страницы или хидером (англ. header).

Давайте рассмотрим простейшую реализацию navbar в Bootstrap 4:

<nav class="navbar navbar-expand-sm navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Разберем этот код подробнее:

• Оберните все внутри элемента nav классом .navbar и классом .navbar-expand {-sm | -md | -lg | -xl} вместе с цветовой схемой.
• Для скрытия и открытия меню на небольших устройствах используйте элемент кнопки с классом .navbar-toggler. Чтобы отобразить «гамбургер» (кнопка открытия/скрытия меню), используйте класс .navbar-toggler-icon для элемента span.
• Для вывода списка ссылок используйте ul с классом .navbar-nav.
• Для каждого отдельного элемента списка используйте тег li с .nav-item.
• Для отдельных ссылок используйте .nav-link.

Navbar с выпадающим меню

Вы можете добавить выпадающие меню на панель навигации navbar. Просто добавьте выпадающее меню в элемент li с примененным классом .dropdown.

<nav class="navbar navbar-expand-sm navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="Preview">
          <a class="dropdown-item" href="#">Dropdown Link 1</a>
          <a class="dropdown-item" href="#">Dropdown Link 2</a>
          <a class="dropdown-item" href="#">Dropdown Link 3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Формы в navbar

Вы можете добавить элементы формы в панель навигации navbar, добавив .form-inline к тегу формы. Для того, чтобы форма была расположена в правой части шапки, добавьте класс .mr-auto:

<nav class="navbar navbar-expand-sm navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
    </ul>
    <form class="form-inline" role="search">
      <input type="text" class="form-control">
      <button type="submit" class="btn btn-secondary">Search</button>
    </form>
  </div>
</nav>

Цвет фона navbar

Bootstrap предоставляет различные опции для добавления цвета на панель навигации navbar. Это работает так: вы указываете тип, светлый или темный (через .navbar-light или .navbar-dark), а затем указываете цвет фона. Цвет можно указать либо с помощью одного из классов цвета Bootstrap (например, .bg-primary, .bg-dark), либо указав свой собственный цвет с помощью CSS (например, используя background-color).

Navbar с основным цветом фона и светлым текстом

В этом примере мы используем .bg-primary вместе с .navbar-dark:

<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Кастомный (пользовательский) цвет меню navbar

Чтобы указать свой собственный цвет фона меню navbar, удалите любой класс .bg-* (например, удалите .bg-primary) и добавьте свой собственный цвет с помощью CSS.

<nav class="navbar navbar-expand-sm navbar-dark" style="background: coral;">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Фиксированное позиционирование navbar

Вы можете закрепить панель навигации вверху или внизу окна просмотра, используя .fixed-top или .fixed-bottom.

Пример navbar зафиксированного в верхней части экрана:

<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

При использовании фиксированных панелей навигации вам обычно нужно добавить отступы к телу документа, чтобы компенсировать высоту панели навигации (в противном случае панель навигации будет скрывать ваш контент).

Например, для navbar который зафиксирован в верхней части документа, используйте следующие стили css:

body { padding-top: 70px; }

Они «отодвинут» весь контент сайта вниз на 70 пикселей и navbar не будет перекрывать его.