Меню, хлебные крошки, вкладки, пагинация

Кроме navbar, в Bulma есть ещё четыре элемента навигации. Menu — вертикальное боковое меню, breadcrumb («хлебные крошки») — путь до текущей страницы, tabs — вкладки, pagination — номера страниц длинного списка. Во всех текущий пункт отмечают классом is-active или is-current, который вы ставите сами.

Боковое меню

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<aside class="menu" style="max-width: 240px">
  <p class="menu-label">Ресторан</p>
  <ul class="menu-list">
    <li><a class="is-active" href="#orders">Заказы</a></li>
    <li><a href="#bookings">Бронирования</a></li>
  </ul>
  <p class="menu-label">Настройки</p>
  <ul class="menu-list">
    <li><a href="#dishes">Блюда</a></li>
    <li><a href="#staff">Сотрудники</a></li>
  </ul>
</aside>

Левая колонка админ-панели: серые подписи разделов капсом и ссылки под ними, пункт «Заказы» подсвечен цветом. Вложенный <ul> внутри <li> даёт подпункты с отступом.

Хлебные крошки

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<nav class="breadcrumb" aria-label="Путь">
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/menu">Меню</a></li>
    <li class="is-active"><a href="#" aria-current="page">Карбонара</a></li>
  </ul>
</nav>

Строка «Главная / Меню / Карбонара», последний пункт серый и не выглядит ссылкой. Разделитель меняют модификаторы has-arrow-separator, has-bullet-separator, has-dot-separator.

Вкладки

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="tabs is-boxed">
  <ul>
    <li class="is-active"><a>Закуски</a></li>
    <li><a>Паста</a></li>
    <li><a>Десерты</a></li>
  </ul>
</div>
<p id="tab-text">Брускетта, капрезе, вителло тоннато.</p>
 
<script>
  const texts = {
    'Закуски': 'Брускетта, капрезе, вителло тоннато.',
    'Паста': 'Карбонара, песто, болоньезе.',
    'Десерты': 'Тирамису, панна-котта.',
  };
  document.querySelectorAll('.tabs li').forEach((tab) => {
    tab.addEventListener('click', () => {
      document.querySelector('.tabs li.is-active').classList.remove('is-active');
      tab.classList.add('is-active');
      document.getElementById('tab-text').textContent = texts[tab.textContent.trim()];
    });
  });
</script>

Три вкладки в рамках; нажмите «Паста» — она станет активной, а текст под вкладками сменится. Bulma рисует только сами вкладки, показывать нужное содержимое должен скрипт. Вид меняют is-boxed, is-toggle, is-centered, is-fullwidth.

Пагинация

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<nav class="pagination is-centered" aria-label="Страницы">
  <a class="pagination-previous" href="?page=2">Назад</a>
  <a class="pagination-next" href="?page=4">Вперёд</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" href="?page=1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" href="?page=2">2</a></li>
    <li><a class="pagination-link is-current" aria-current="page">3</a></li>
    <li><a class="pagination-link" href="?page=4">4</a></li>
  </ul>
</nav>

Под таблицей заказов — кнопки «Назад» и «Вперёд» и номера страниц, третья выделена цветом. Ссылки ведут на тот же адрес с другим page; какие заказы показать, решает сервер.

Частая ошибка

Ставить is-active на ссылку внутри вкладки или крошки: <li><a class="is-active">. У tabs и breadcrumb класс должен быть на <li>, а у menu-list — на <a>. Если активный пункт не подсвечивается, проверьте, на каком теге стоит класс.

Спасибо, что читаете!