This component has been deprecated.

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://bulma.io/assets/images/bulma-logo.png" alt="Bulma logo" />
        </a>
      </div>

      <div class="nav-center">
        <a class="nav-item">
          <span class="icon">
            <i class="fab fa-github"></i>
          </span>
        </a>
        <a class="nav-item">
          <span class="icon">
            <i class="fab 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></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="fab fa-twitter"></i>
                </span>
                <span>Tweet</span>
              </a>
            </p>
            <p class="control">
              <a class="button is-primary">
                <span class="icon">
                  <i class="fas 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://bulma.io/assets/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></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://bulma.io/assets/images/jgthms.png" />
          </figure>
          Profile
        </a>
        <a class="nav-item is-tab">Log out</a>
      </div>
    </div>
  </nav>

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Nav

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

Modifiers

How to support Bulma