Основы верстки панели навигации на фреймворке Bulma


Еще один элемент интерфейса, который можно часто встретить на различных сайтах - это навигационная панель или панель навигации. Эта панель находится в верхней части страницы. 

С помощью панели навигации мы позволяем пользователю переходить на основные разделы сайта. Размещаем там выпадающие списки, кнопки, логотип и.т.д.

Фреймворк Bulma имеет мощный компонент, который позволяет верстать такие подобные панели навигации для сайта. Делать это с его помощью можно очень легко и просто.

Давайте рассмотрим самые основы, как можно создать панель навигации для своего сайта.

Найти описание всех возможных функций компонента панели навигации вы можете Components - Navbar.

Панель навигации - это адаптивная горизонтальная панель, которая поддерживает изображения, ссылки, кнопки и выпадающие списки.

Давайте рассмотрим, как можно добавить эту панель навигации в нашу заготовку веб-страницы.

В разделе Navbar Menu вы можете найти вот такой код:

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
  <div class="navbar-menu">
    <!-- navbar start, navbar end -->
  </div>
</nav>

Вставить этот код нужно в самом верху веб-страницы сразу перед открывающим тэгом body.

Панель навигации состоит из двух частей.

1 - navbar-brand

Это область, которая отвечает за левую сторону панели навигации. Может содержать navbar-burger (специальную иконку, которая отображается только на мобильных устройствах для показа списка меню в раскрывающемся списке).

Особенность navbar-brand в том, что эта область содержит такие элементы, которые будут видны даже на мобильных устройствах. В этой области рекомендуется размещать всего несколько самых важных ссылок для пользователя, которые будут видны даже на мобильных устройствах.

Давайте попробуем внутрь navbar-brand добавить какой-нибудь элемент (т.е. элемент навигации).

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item">Элемент</a>
  </div>
  <div class="navbar-menu">
    <a class="navbar-item">Элемент</a>
  </div>
</nav>

По сути, этим мы уже создали панель навигации для сайта.

2 - navbar-menu

Это еще одна область панели навигации, которая НЕ отображается на мобильных устройствах, но отображается на больших мониторах (устройствах с большой диагональю экрана).

Если мы хотим, чтобы navbar-menu показывалась и на мобильных устройствах, нужно добавить для нее класс is-active.

 <div class="navbar-menu is-active">

Это основы работы и верстки панели навигации с помощью фреймворка Bulma.