---
layout: cypress
title: Components/Navbar
---

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

    <a class="navbar-burger">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item is-active">
        Documentation
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
{% endcapture %}

<nav id="navbar" class="navbar">
  {{ content }}
</nav>

<nav id="navbar-container" class="navbar">
  <div class="container">
    {{ content }}
  </div>
</nav>

<nav id="navbar-has-shadow" class="navbar has-shadow">
  {{ content }}
</nav>

<nav id="navbar-is-fixed-top" class="navbar is-fixed-top">
  {{ content }}
</nav>

<nav id="navbar-is-fixed-bottom" class="navbar is-fixed-bottom">
  {{ content }}
</nav>

{% for color in site.data.colors.justColors %}
  <nav id="navbar-{{ color }}" class="navbar is-{{ color }}">
    <div class="navbar-brand">
      <a class="navbar-item" href="{{ site.url }}">
        {% if include.light %}
          <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
        {% else %}
          <img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
        {% endif %}
      </a>
      <div class="navbar-burger" data-target="navMenuColor{{ color }}-example">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div id="navMenuColor{{ color }}-example" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item" href="{{ site.url }}/">
          Home
        </a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="{{ site.url }}/documentation/overview/start/">
            Docs
          </a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
              Overview
            </a>
            <a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
              Modifiers
            </a>
            <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
              Columns
            </a>
            <a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
              Layout
            </a>
            <a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
              Form
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
              Elements
            </a>
            <a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
              Components
            </a>
          </div>
        </div>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="field is-grouped">
            <p class="control">
              <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
                <span class="icon">
                  <i class="fab fa-twitter"></i>
                </span>
                <span>
                  Tweet
                </span>
              </a>
            </p>
            <p class="control">
              <a class="button is-primary" href="{{ site.data.meta.download }}">
                <span class="icon">
                  <i class="fas fa-download"></i>
                </span>
                <span>Download</span>
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </nav>
{% endfor %}