You are viewing the deprecated 0.6.0 version of the website. Click here to view the latest version

This component has been deprecated and will be deleted soon.

While both .nav and .navbar currently co-exist to ensure backwards compatibility, the .nav will probably be deleted in an upcoming update, so you should start using the new navbar instead.

Nav

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.6.0/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.6.0/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.6.0/images/jgthms.png">
        </figure>
        Profile
      </a>
      <a class="nav-item is-tab">Log out</a>
    </div>
  </div>
</nav>

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!