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://yellowdi.github.io/Elenore/images/elenore-logo.png" alt="Elenore 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>

  <!-- 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://yellowdi.github.io/Elenore/images/elenore-logo.png" alt="Elenore 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://yellowdi.github.io/Elenore/images/avatar.jpg">
        </figure>
        Profile
      </a>
      <a class="nav-item is-tab">Log out</a>
    </div>
  </div>
</nav>

This page is open source. View on GitHub