Navigation bar and page header

See the navigation bar and page header in context on the demo page, in both light and dark themes.

Main navigation bar

The main-nav modifier turns a Bulma navbar into the Teklia main navigation bar: a compact bar (3rem high) in the purple of the Teklia logo, with white links and a thick bottom border.

<nav class="navbar main-nav" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <strong class="is-size-5">teklia</strong>
    </a>
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="main-menu">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="main-menu" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item is-active" href="#">Projects</a>
      <a class="navbar-item" href="#">Processes</a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">Admin</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">Users</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Jobs</a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <a class="navbar-item" data-theme-switch title="Toggle dark mode">
        <span class="icon is-light-theme-only"><i class="fa-solid fa-moon"></i></span>
        <span class="icon is-dark-theme-only"><i class="fa-solid fa-sun"></i></span>
      </a>
    </div>
  </div>
</nav>

It is a regular Bulma navbar: brand, burger, start and end menus, dropdowns all work as documented by Bulma. Like with Bulma, opening the menu with the burger on mobile requires a few lines of JavaScript.

Colors

Part Color

Part	Color
Background, menu and dropdowns	`#29235c`
Hovered and active items, open dropdowns	`#4b457b`
Bottom border (4px) and item borders	`#625d88`
Text and dropdown arrows	white

Background, menu and dropdowns

#29235c

Hovered and active items, open dropdowns

#4b457b

Bottom border (4px) and item borders

#625d88

Text and dropdown arrows

white

These colors are fixed: the bar is the same in the light and dark themes, as a brand element. is-active on a navbar-item highlights the current section.

Layout

The bar and its brand are 3rem high, more compact than Bulma’s default 3.25rem.
On desktop, the vertical padding of the items is removed, to keep the bar compact; dropdown items keep a small padding.
Dropdowns also open when one of their items has the keyboard focus, not only on hover. See Accessibility.

Page header

The header.header element is the bar displayed right under the navigation bar, with a breadcrumb on the left and the actions of the page on the right. It has a light shadow to separate it from the content, and the same 3rem minimum height as the navigation items.

Its content is laid out with Bulma columns, whose vertical paddings are removed so the header stays compact:

<header class="header px-4">
  <div class="columns is-vcentered">
    <div class="column">
      <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
        <ul>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Saint-Martin parish registers</a></li>
          <li class="is-active"><a href="#" aria-current="page">Register 1790–1815</a></li>
        </ul>
      </nav>
    </div>
    <div class="column is-narrow">
      <div class="buttons are-small">
        <button class="button is-info is-outlined">Share</button>
        <button class="button is-primary">New process</button>
      </div>
    </div>
  </div>
</header>

The styles apply to a <header> element with the header class: a <div class="header"> is not styled.