Фиксированная навигационная панель в Bootstrap 5

Что такое фиксированная навигационная панель?

Фиксированная навигационная панель (или “sticky” навигационная панель) прикрепляется к верхней части страницы, когда вы прокручиваете вниз. Это удобно для пользователей, так как они всегда видят навигацию, даже когда прокручивают длинные страницы.

Пример фиксированной навигационной панели

Давайте рассмотрим простой пример фиксированной навигационной панели с использованием Bootstrap 5:

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Главная</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Ссылка</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Отключено</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Поиск" aria-label="Поиск">
        <button class="btn btn-outline-success" type="submit">Искать</button>
      </form>
    </div>
  </div>
</nav>

Посмотреть демо

В этом примере мы создали фиксированную навигационную панель с логотипом “Моя навигация” и несколькими пунктами меню. При прокрутке страницы навигационная панель остается на месте, обеспечивая удобство для пользователей.

Заключение

Bootstrap 5.3 предоставляет мощные инструменты для создания фиксированных навигационных панелей. Используйте их, чтобы сделать навигацию на вашем сайте более удобной и функциональной.