BulmaでInstagramのようなハンバーガーメニューのないレスポンシブなナビゲーションバーのサンプルコード

CSSフレームワークのBulmaを使用した、Instagramのようなハンバーガーメニューがないレスポンシブなナビゲーションバーのサンプルコードです。
Flexbox helpersを使用してレスポンシブにしています。
デスクトップサイズ時の検索バーがモバイルとタブレットサイズではアイコンに変わるようになっていて、ドロップダウンメニューもあります。

CodePenのデモ

See the Pen bulma-navbar-without-burger by kwtuku (@kwtuku) on CodePen.

解説

大まかな構造

html

<nav class="navbar has-shadow is-fixed-top is-flex is-justify-content-space-around">
  <div class="navbar-brand is-flex-grow-2 is-justify-content-center">
    <!-- ロゴ -->
  </div>

  <div class="navbar-menu is-flex-grow-1 is-justify-content-center">
    <!-- 検索バー -->
  </div>

  <div class="navbar-item is-flex-grow-1 is-flex-touch is-justify-content-center is-align-items-center p-0">
    <!-- アイコンの集まり -->
  </div>
</nav>

navbar要素は3つの子要素をもち、navbar-brand要素がロゴにあたる部分で、navbar-menuが検索バーにあたる部分で、navbar-itemがアイコンの集まりにあたる部分です。
navbar要素のis-justify-content-space-aroundと各子要素のis-flex-grow-*で子要素を均等に並べています。
各子要素のis-justify-content-centerで各子要素内の要素を中央に配置しています。
Bulmaのnavbarはnavbar-brandだけがどの画面サイズでも表示され、それ以外要素はデスクトップサイズでしか表示されないようになっていますが、navbar-item要素はis-flex-touchを加えることでモバイルとタブレットでも表示されるようにしています。
navbar-item要素のis-align-items-centerでアイコンを上下に中央寄せしています。

navbar-item要素

html

<div class="navbar-item is-flex-grow-1 is-flex-touch is-justify-content-center is-align-items-center p-0">
  <a class="navbar-item">
    <span class="icon is-medium">
      <i class="fas fa-lg fa-home"></i>
    </span>
  </a>

  <a class="navbar-item is-hidden-desktop">
    <span class="icon is-medium">
      <i class="fas fa-lg fa-search"></i>
    </span>
  </a>

  <!-- 他のアイコン -->

  <!-- ドロップダウンメニュー -->
<div>

is-hidden-desktopで検索のアイコンが画面がデスクトップサイズ時は非表示になるようになっています。

ドロップダウンメニュー

html

<div class="navbar-item is-flex-grow-1 is-flex-touch is-justify-content-center is-align-items-center p-0">
  <!-- 他のアイコン -->

  <!-- 他のアイコン -->

  <div class="navbar-item">
    <div class="dropdown is-right">
      <div class="dropdown-trigger">
        <button class="button is-white has-text-grey-dark">
          <span class="icon is-medium">
            <i class="fas fa-lg fa-user"></i>
          </span>
          <span class="icon is-medium">
            <i class="fas fa-angle-down"></i>
          </span>
        </button>
      </div>
      <div class="dropdown-menu" id="dropdown-menu">
        <div class="dropdown-content">
          <a class="dropdown-item">
            プロフィール
          </a>
        </div>
      </div>
    </div>
  </div>
<div>

Bulmaのナビゲーションバーにはnavbar-dropdownがありますが、モバイルとタブレット表示ではドロップダウンメニュー内の要素が非表示にならずレイアウトが崩れてしまうのでdropdownを使用しています。
is-whiteでボタンのボーダーを見えなくしていて、has-text-grey-darkでアイコンの色を他の要素と同じ色に合わせています。

参考リンク