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