ふいにボトムナビ(下の方にあるメニューバー)をつけたいなと思ったので、
その時の備忘録。Bulmaが好きなのでBulmaで。

やっぱスマホだとボトムナビゲーションのほうがいいよねぇと思ったので、レスポンシブ対応した(*´ω｀*) pic.twitter.com/NjUznVjOXv
— きらぷか📚積読ハウマッチ開発中【事前登録はじめました】 (@kira_puka) July 7, 2019

Bulmaの`nav.navbar`を使えばOK

ポイント

.navbarは複数あってもいいので、上とは別に下にも追加する
.is-fixed-bottomを使って、下で固定
常に表示したいので.navbar-brandの中に.navbar-itemを配置
.navbar-item .is-expanded .is-blockでメニューを等幅に

<!-- 上のナビゲーションバー -->
<nav class="navbar is-primary is-fixed-top" role="navigation">
  <!-- 略 -->
</nav>
<!-- /上のナビゲーションバー -->

<!-- ボトムナビゲーションバー -->
<nav class="navbar is-link is-fixed-bottom" role="navigation">
  <div class="navbar-brand">
    <a class="navbar-item is-expanded is-block has-text-centered">
      <i class="fa fa-home"></i>
      <p class="is-size-7">HOME</p>
    </a>
    <a class="navbar-item is-expanded is-block has-text-centered">
      <i class="fa fa-search"></i>
      <p class="is-size-7">Search</p>
    </a>
    <a class="navbar-item is-expanded is-block has-text-centered">
      <i class="fa fa-user"></i>
      <p class="is-size-7">Account</p>
    </a>
  </div>
</nav>
<!-- /ボトムナビゲーションバー -->

<!-- 以下にコンテンツを書く -->
<div class="contents">
</div>