Menu, breadcrumb, tabs, pagination

Besides the navbar, Bulma has four more navigation elements. Menu is a vertical sidebar menu, breadcrumb is the path to the current page, tabs are tabs, and pagination is the page numbers of a long list. In all of them you mark the current item yourself with the is-active or is-current class.

<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">Restaurant</p>
  <ul class="menu-list">
    <li><a class="is-active" href="#orders">Orders</a></li>
    <li><a href="#bookings">Bookings</a></li>
  </ul>
  <p class="menu-label">Settings</p>
  <ul class="menu-list">
    <li><a href="#dishes">Dishes</a></li>
    <li><a href="#staff">Staff</a></li>
  </ul>
</aside>

The left column of the admin page: grey uppercase section labels with links under them, the "Orders" item highlighted in colour. A nested <ul> inside an <li> gives indented sub-items.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<nav class="breadcrumb" aria-label="Breadcrumbs">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/menu">Menu</a></li>
    <li class="is-active"><a href="#" aria-current="page">Carbonara</a></li>
  </ul>
</nav>

A "Home / Menu / Carbonara" line; the last item is grey and does not look like a link. The has-arrow-separator, has-bullet-separator and has-dot-separator modifiers change the separator.

Tabs

<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>Starters</a></li>
    <li><a>Pasta</a></li>
    <li><a>Desserts</a></li>
  </ul>
</div>
<p id="tab-text">Bruschetta, caprese, vitello tonnato.</p>
 
<script>
  const texts = {
    Starters: 'Bruschetta, caprese, vitello tonnato.',
    Pasta: 'Carbonara, pesto, bolognese.',
    Desserts: 'Tiramisu, panna cotta.',
  };
  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>

Three boxed tabs; click "Pasta" and it becomes active while the text below changes. Bulma draws only the tabs themselves; showing the right content is the script's job. is-boxed, is-toggle, is-centered and is-fullwidth change the look.

Pagination

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<nav class="pagination is-centered" aria-label="Pages">
  <a class="pagination-previous" href="?page=2">Previous</a>
  <a class="pagination-next" href="?page=4">Next</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>

Under the orders table: "Previous" and "Next" buttons and page numbers, with the third highlighted. The links lead to the same address with a different page; the server decides which orders to show.

Common mistake

Putting is-active on the link inside a tab or breadcrumb: <li><a class="is-active">. For tabs and breadcrumb the class goes on the <li>, while for menu-list it goes on the <a>. If the active item is not highlighted, check which tag carries the class.

Thanks for reading!

Sidebar menu

Tabs

Common mistake

Thanks for reading!