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

{% include subnav-components.html %}

{% capture navbar_example %}
{% include navbar.html id="Example" %}
{% endcapture %}

{% capture navbar_brand_example %}
<nav class="navbar">
  <div class="navbar-brand">
    <!-- nav items, nav burger ... -->
  </div>
</nav>
{% endcapture %}

{% capture navbar_brand_items_example %}
<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="{{ site.url }}">
      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
    </a>

    <div class="navbar-burger">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</nav>
{% endcapture %}

<section class="section">
  <div class="container">

    <h1 class="title">Navbar</h1>
    <h2 class="subtitle">
      A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
    </h2>

    <hr>

    <div class="message is-success">
      <div class="message-body">
        <p>The new <code>.navbar</code> replaces the old <code>.nav</code> component. You can still access its documentation <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
      </div>
    </div>

    <div class="content">
      <p>
        The <code>.navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
      </p>
      <ul>
        <li>
          <code>.navbar</code> the <strong>main</strong> container
          <ul>
            <li>
              <code>.navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
              <ul>
                <li>
                  <code>.navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
                </li>
              </ul>
            </li>
            <li>
              <code>.navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
              <ul>
                <li>
                  <code>.navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
                </li>
                <li>
                  <code>.navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
                  <ul>
                    <li>
                      <code>.navbar-item</code> each <strong>single item</strong> of the navbar, which can either be a <code>a</code> or a <code>div</code>
                      <ul>
                        <li>
                          <code>.navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
                        </li>
                        <li>
                          <code>.navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
                          <ul>
                            <li>
                              <code>.navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="example is-paddingless">
      {{navbar_example}}
    </div>

    {% highlight html %}{{navbar_example}}{% endhighlight %}

    <hr>

    <h3 class="title">Navbar brand</h3>

    <div class="content">
      <p>
        The <code>.navbar-brand</code> is the left side of the navbar. It can contain:
      </p>
      <ul>
        <li>
          a number of <code>.navbar-item</code>
        </li>
        <li>
          the <code>.navbar-burger</code> as last child
        </li>
      </ul>
    </div>

    {% highlight html %}{{navbar_brand_example}}{% endhighlight %}

    <div class="content">
      <p>
        The navbar brand is <strong>always visible</strong>: on both touch devices (< 1000px) and desktop (1000px +). As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
      </p>
    </div>

    <div class="example is-paddingless">
      {{navbar_brand_items_example}}
    </div>

    {% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}

  </div>
</section>