bulma/docs/_includes/global/header.html

<header class="bd-header">
  <a class="bulma-logo" href="{{ site.url }}/">
    {% include svg/bulma-logo.html %}
  </a>

  <nav id="js-nav" class="bd-nav">
    {% for link_id in site.data.links.navbar %} {% include global/nav-item.html
    link_id=link_id %} {% endfor %}

    <div class="bd-nav-icons">
      {% for link_id in site.data.links.navbar_icons %} {% include
      global/nav-item.html link_id=link_id %} {% endfor %}

      <button class="bd-nav-item is-search is-icon">
        <span class="icon">
          <i class="fa-solid fa-magnifying-glass fa-lg"></i>
        </span>
      </button>

      <button
        class="bd-nav-item is-icon is-ellipsis js-burger"
        data-target="js-more"
      >
        <span class="icon">
          <i class="fa-solid fa-ellipsis fa-lg"></i>
        </span>
      </button>

      <div id="js-more" class="bd-nav-menu is-more js-menu">
        {% for link_id in site.data.links.navbar_more %} {% include
        global/nav-item.html link_id=link_id %} {% endfor %}
      </div>
    </div>

    <a
      class="button is-primary bd-nav-mobile-download"
      href="{{ site.data.meta.download }}"
    >
      Download
    </a>
  </nav>

  <div class="bd-nav-themes">
    <button id="js-cycle" class="bd-cycle js-burger" data-target="js-themes">
      <div class="bd-cycles">
        <div class="bd-cycle-sun">
          <span class="icon">
            <i class="fas fa-lg fa-sun" aria-hidden="true"></i>
          </span>
        </div>

        <div class="bd-cycle-moon">
          <span class="icon">
            <i class="fas fa-lg fa-moon" aria-hidden="true"></i>
          </span>
        </div>
      </div>
    </button>

    <div id="js-themes" class="bd-nav-menu is-cycles js-menu js-themes">
      <button
        data-scheme="light"
        class="bd-nav-item is-sun"
        aria-label="Light mode"
      >
        <span class="icon">
          <i class="fas fa-sun" aria-hidden="true"></i>
        </span>
        <span>Light</span>
      </button>

      <button
        data-scheme="dark"
        class="bd-nav-item is-moon"
        aria-label="Dark mode"
      >
        <span class="icon">
          <i class="fas fa-moon" aria-hidden="true"></i>
        </span>
        <span>Dark</span>
      </button>

      <button
        data-scheme="system"
        class="bd-nav-item is-system"
        aria-label="System mode"
      >
        <span class="icon">
          <i class="fas fa-display" aria-hidden="true"></i>
        </span>
        <span>System</span>
      </button>
    </div>
  </div>

  <div class="bd-nav-search is-hidden">
    <button
      class="bd-nav-item is-search-desktop is-icon js-burger"
      data-target="js-search"
    >
      <span class="icon">
        <i class="fa-solid fa-magnifying-glass fa-lg"></i>
      </span>
    </button>

    <div id="js-search" class="bd-nav-menu is-search js-menu">
      <input id="form-search" class="input" type="text" placeholder="Search" />
    </div>
  </div>

  <a
    class="button is-primary bd-nav-desktop-download"
    href="{{ site.data.meta.download }}"
  >
    Download
  </a>

  <button class="navbar-burger bd-nav-burger js-burger" data-target="js-nav">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </button>
</header>