Bulma v0.5.1: a modern CSS framework based on Flexbox

A responsive horizontal nav bar that can contain links, tabs, buttons, icons, and a logo

The nav container can have 3 parts:

nav-left
nav-center
nav-right

Each nav item needs to be wrapped in a nav-item element.

For responsiveness, 2 additional classes are available:

nav-toggle for the hamburger menu on mobile
nav-menu for menu that is collapsable on mobile (you can combine it with nav-right)
toggle is-active on nav-toggle and nav-menu when nav-toggle was clicked

<nav class="nav">
  <div class="nav-left">
    <a class="nav-item">
      <img src="https://versions.bulma.io/0.5.1/images/bulma-logo.png" alt="Bulma logo">
    </a>
  </div>

  <div class="nav-center">
    <a class="nav-item">
      <span class="icon">
        <i class="fa fa-github"></i>
      </span>
    </a>
    <a class="nav-item">
      <span class="icon">
        <i class="fa fa-twitter"></i>
      </span>
    </a>
  </div>

  <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
  <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
  <span class="nav-toggle">
    <span></span>
    <span></span>
    <span></span>
  </span>

  <!-- This "nav-menu" is hidden on mobile -->
  <!-- Add the modifier "is-active" to display it on mobile -->
  <div class="nav-right nav-menu">
    <a class="nav-item">
      Home
    </a>
    <a class="nav-item">
      Documentation
    </a>
    <a class="nav-item">
      Blog
    </a>

    <div class="nav-item">
      <div class="field is-grouped">
        <p class="control">
          <a class="button" >
            <span class="icon">
              <i class="fa fa-twitter"></i>
            </span>
            <span>Tweet</span>
          </a>
        </p>
        <p class="control">
          <a class="button is-primary">
            <span class="icon">
              <i class="fa fa-download"></i>
            </span>
            <span>Download</span>
          </a>
        </p>
      </div>
    </div>
  </div>
</nav>

Modifiers

the nav container can have a shadow by adding the has-shadow modifier
the nav-item can become active by adding the is-active modifier
the nav-item can become a tab by adding the is-tab modifier

To optimise the space on desktop, but also allow the mobile view to be usable, you can duplicate nav items in both nav-left and nav-right, and show/hide them with responsive helpers.

<nav class="nav has-shadow"> <div class="container"> <div class="nav-left"> <a class="nav-item"> <img src="https://versions.bulma.io/0.5.1/images/bulma-logo.png" alt="Bulma logo"> </a> <a class="nav-item is-tab is-hidden-mobile is-active">Home</a> <a class="nav-item is-tab is-hidden-mobile">Features</a> <a class="nav-item is-tab is-hidden-mobile">Pricing</a> <a class="nav-item is-tab is-hidden-mobile">About</a> </div> <span class="nav-toggle"> <span></span> <span></span> <span></span> </span> <div class="nav-right nav-menu"> <a class="nav-item is-tab is-hidden-tablet is-active">Home</a> <a class="nav-item is-tab is-hidden-tablet">Features</a> <a class="nav-item is-tab is-hidden-tablet">Pricing</a> <a class="nav-item is-tab is-hidden-tablet">About</a> <a class="nav-item is-tab"> <figure class="image is-16x16" style="margin-right: 8px;"> <img src="https://versions.bulma.io/0.5.1/images/jgthms.png"> </figure> Profile </a> <a class="nav-item is-tab">Log out</a> </div> </div> </nav>

Nav

A responsive horizontal nav bar that can contain links, tabs, buttons, icons, and a logo

Modifiers