bulma/docs/_includes/navbar.html

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

    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.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.data.meta.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">
      <a class="navbar-item bd-navbar-item-documentation {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
        <span class="icon has-text-primary">
          <i class="fas fa-book"></i>
        </span>
        <span>Documentation</span>
      </a>

      {% for item in site.data.global.navbar_items %}
        <a class="navbar-item bd-navbar-item-{{ item.id }} {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
          <span class="icon {{ item.color }}">
            <i class="{{ item.fa_type }} {{ item.fa_icon }}"></i>
          </span>
          <span>{{ item.title }}</span>
        </a>
      {% endfor %}

      <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 %}">
          {% for item in site.data.global.more_items %}
            <a class="navbar-item {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
              <div class="media">
                <div class="media-left">
                  <span class="icon is-large has-text-{{ item.color }}">
                    <i class="{{ item.fa_type }} {{ item.fa_icon }} fa-2x"></i>
                  </span>
                </div>
                <div class="media-content">
                  <p>
                    <strong>{{ item.title }}</strong>
                    <br>
                    <small>{{ item.description }}</small>
                  </p>
                </div>
              </div>
            </a>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.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.data.meta.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="border-radius: 3px; 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">
            <a class="button is-primary" href="{{ site.data.meta.download }}">
              <strong>Download</strong>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>