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

Documentation

Everything you need to create a website with Bulma

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="http://bulma.io/versions/0.5.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="http://bulma.io/versions/0.5.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="http://bulma.io/versions/0.5.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!