bulma/docs/documentation/components/nav.html

---
layout: documentation
doc-tab: components
doc-subtab: nav
---

{% include subnav-components.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Nav</h1>
    <h2 class="subtitle">
      A responsive horizontal <strong>nav bar</strong> that can contain links, tabs, buttons, icons, and a logo
    </h2>

    <hr>

    <div class="content">
      <p>
        The <code>nav</code> container can have <strong>3 parts</strong>:
      </p>
      <ul>
        <li><code>nav-left</code></li>
        <li><code>nav-center</code></li>
        <li><code>nav-right</code></li>
      </ul>
      <p>
        Each nav item needs to be wrapped in a <code>nav-item</code> element.
      </p>
      <p>
        For responsiveness, <strong>2 additional</strong> classes are available:
      </p>
      <ul>
        <li><code>nav-toggle</code> for the hamburger menu on mobile</li>
        <li><code>nav-menu</code> for menu that is collapsable on mobile (you can combine it with <code>nav-right</code>)</li>
      </ul>
    </div>

{% capture nav_example %}
<nav class="nav">
  <div class="nav-left">
    <a class="nav-item">
      <img src="{{ site.url }}/images/bulma-type.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>

    <span class="nav-item">
      <a class="button" >
        <span class="icon">
          <i class="fa fa-twitter"></i>
        </span>
        <span>Tweet</span>
      </a>
      <a class="button is-primary">
        <span class="icon">
          <i class="fa fa-download"></i>
        </span>
        <span>Download</span>
      </a>
    </span>
  </div>
</nav>
{% endcapture %}

<div class="example">
{{nav_example}}
</div>

{% highlight html %}
{{nav_example}}
{% endhighlight %}

    <hr>

    <h3 class="title">Modifiers</h3>

    <div class="content">
      <ul>
        <li>the <code>nav</code> container can have a <strong>shadow</strong> by adding the <code>has-shadow</code> modifier</li>
        <li>the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier</li>
        <li>the <code>nav-item</code> can become a <strong>tab</strong> by adding the <code>is-tab</code> modifier</li>
      </ul>
    </div>
  </div>

<div class="example">
<nav class="nav has-shadow">
  <div class="container">
    <div class="nav-left">
      <a class="nav-item is-tab is-active">Card</a>
      <a class="nav-item is-tab">Level</a>
      <a class="nav-item is-tab">Media object</a>
      <a class="nav-item is-tab">Menu</a>
      <a class="nav-item is-tab">Message</a>
      <a class="nav-item is-tab">Modal</a>
      <a class="nav-item is-tab">Nav</a>
      <a class="nav-item is-tab">Pagination</a>
      <a class="nav-item is-tab">Panel</a>
      <a class="nav-item is-tab">Tabs</a>
    </div>
  </div>
</nav>
</div>

{% highlight html %}
<nav class="nav has-shadow">
  <div class="container">
    <div class="nav-left">
      <a class="nav-item is-tab is-active">Card</a>
      <a class="nav-item is-tab">Level</a>
      <a class="nav-item is-tab">Media object</a>
      <a class="nav-item is-tab">Menu</a>
      <a class="nav-item is-tab">Message</a>
      <a class="nav-item is-tab">Modal</a>
      <a class="nav-item is-tab">Nav</a>
      <a class="nav-item is-tab">Pagination</a>
      <a class="nav-item is-tab">Panel</a>
      <a class="nav-item is-tab">Tabs</a>
    </div>
  </div>
</nav>
{% endhighlight %}

</section>