bulma/docs/_includes/navbar.html

<nav id="navbar" class="navbar is-fixed-top {% if include.transparent %}is-transparent{% endif %}">
  <div id="specialShadow" class="bd-special-shadow"></div>

  <div class="container">

  <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>

    <a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank">
      <span class="icon" style="color: #333;">
        <i class="fab fa-lg fa-github"></i>
      </span>
    </a>

    <a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
      <span class="icon" style="color: #55acee;">
        <i class="fab fa-lg fa-twitter"></i>
      </span>
    </a>

    <div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navMenu{{ include.id }}" class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}">
          Docs
        </a>
        <div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
          <a class="navbar-item {% if page.doc-tab == 'overview' %}is-active{% endif %}" href="{{ site.documentation }}">
            Overview
          </a>
          <a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
            Modifiers
          </a>
          <a class="navbar-item {% if page.doc-tab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
            Columns
          </a>
          <a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
            Layout
          </a>
          <a class="navbar-item {% if page.doc-tab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/general/">
            Form
          </a>
          <a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
            Elements
          </a>
          <a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
            Components
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            <div>
              <p class="is-size-6-desktop">
                <strong>{{ site.version }}</strong>
              </p>
              {{#unless site.deprecated}}
                <small>
                  <a class="bd-view-all-versions" href="https://versions.bulma.io/">View all versions</a>
                </small>
              {{/unless}}
            </div>
          </div>
        </div>
      </div>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
          Blog
        </a>
        <div id="blogDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
          {% for post in site.posts limit:3 %}
            <a class="navbar-item" href="{{ post.url }}">
              <div class="navbar-content">
                <p>
                  <small class="has-text-link">{{ post.date | date_to_string }}</small>
                </p>
                <p>{{ post.title }}</p>
              </div>
            </a>
          {% endfor %}
          <a class="navbar-item" href="{{ site.url }}/blog/">
            More posts
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            <div class="navbar-content">
              <div class="level is-mobile">
                <div class="level-left">
                  <div class="level-item">
                    <strong>Stay up to date!</strong>
                  </div>
                </div>
                <div class="level-right">
                  <div class="level-item">
                    <a class="button bd-is-rss is-small" href="{{ site.url }}/atom.xml">
                      <span class="icon is-small">
                        <i class="fas fa-rss"></i>
                      </span>
                      <span>Subscribe</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="navbar-item has-dropdown is-hoverable">
        <div class="navbar-link">
          More
        </div>
        <div id="moreDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
          <a class="navbar-item {% if page.route == 'bulma-start' %}is-active{% endif %}" href="{{ site.url }}/bulma-start/">
            <div class="media">
              <div class="media-left">
                <span class="icon is-large has-text-success">
                  <i class="fas fa-rocket fa-2x"></i>
                </span>
              </div>
              <div class="media-content">
                <p>
                  <strong>Bulma start</strong>
                  <br>
                  <small>A tiny npm package to get started</small>
                </p>
              </div>
            </div>
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item {% if page.route == 'made-with-bulma' %}is-active{% endif %}" href="{{ site.url }}/made-with-bulma/">
            <div class="media">
              <div class="media-left">
                <span class="icon is-large has-text-primary">
                  <i class="fas fa-certificate fa-2x"></i>
                </span>
              </div>
              <div class="media-content">
                <p>
                  <strong>Made with Bulma</strong>
                  <br>
                  <small>The official community badge</small>
                </p>
              </div>
            </div>
          </a>
          <hr class="navbar-divider">
          <a id="moreDropdownBootstrap" class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/alternative-to-bootstrap/">
            <div class="media">
              <div class="media-left">
                <span class="icon is-large">
                  <i class="fas fa-exchange-alt fa-2x"></i>
                </span>
              </div>
              <div class="media-content">
                <p>
                  <strong>Coming from Bootstrap</strong>
                  <br>
                  <small>See how Bulma is an alternative to Bootstrap</small>
                </p>
              </div>
            </div>
          </a>
          <hr class="navbar-divider">
          <a id="moreDropdownPatreon" class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/backers/">
            <div class="media">
              <div class="media-left">
                <span class="icon is-large">
                  <i class="fab fa-patreon fa-2x"></i>
                </span>
              </div>
              <div class="media-content">
                <p>
                  <strong>Patreon backers</strong>
                  <br>
                  <small>Everyone who is supporting Bulma</small>
                </p>
              </div>
            </div>
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item {% if page.route == 'extensions' %}is-active{% endif %}" href="{{ site.url }}/extensions/">
            <div class="media">
              <div class="media-left">
                <span class="icon is-large has-text-danger">
                  <i class="fas fa-plug fa-2x"></i>
                </span>
              </div>
              <div class="media-content">
                <p>
                  <strong>Extensions</strong>
                  <br>
                  <small>Side projects to enhance Bulma</small>
                </p>
              </div>
            </div>
          </a>
        </div>
      </div>
      <a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
        <span class="bd-emoji">⭐️</span>
        Expo
      </a>
      <a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
        <span class="bd-emoji">❤️</span>
        Love
      </a>
    </div>

    <div class="navbar-end">
      <a class="navbar-item is-hidden-desktop-only" href="{{ site.github }}" target="_blank">
        <span class="icon" style="color: #333;">
          <i class="fab fa-lg fa-github"></i>
        </span>
      </a>
      <a class="navbar-item is-hidden-desktop-only" href="{{ site.twitter }}" target="_blank">
        <span class="icon" style="color: #55acee;">
          <i class="fab fa-lg fa-twitter"></i>
        </span>
      </a>
      <div class="navbar-item">
        <div class="field is-grouped is-grouped-multiline">
          <p class="control">
            <a href="https://www.patreon.com/jgthms" target="_blank" style="display: block;">
              <img
                style="display: block; max-height: 36px;"
                src="/images/become_a_patron_button.png"
                width="153"
                height="36"
                srcset="/images/become_a_patron_button@3x.png 3x,
                        /images/become_a_patron_button@2x.png 2x,
                        /images/become_a_patron_button.png 1x"
                alt="Become a patron">
            </a>
          </p>
          <p class="control">
            {% include elements/tw-button.html label="Tweet" %}
          </p>
          <p class="control">
            <a class="button is-primary" href="{{ site.download }}">
              <span class="icon">
                <i class="fas fa-download"></i>
              </span>
              <span>Download</span>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>

  </div>
</nav>

{% include fortyfour.html %}