Bootstrapでナビゲーションバーを実装する方法【現役エンジニアが解説】

PROGRAM

今回は、Bootstrapでナビゲーションバーを実装する方法について、簡単に解説していきます。

基本のHTML

Bootstrap 5では簡単にナビゲーションバーが作れます。

さらに、このナビゲーションバーはレスポンシブ対応です。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ほげ不動産</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navber" aria-controls="Navber" aria-expanded="false">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="Navber">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">会社概要</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            物件情報
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">賃貸</a></li>
            <li><a class="dropdown-item" href="#">新築</a></li>
            <li><a class="dropdown-item" href="#">中古</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">土地</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">採用情報</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">お問い合わせ</a>
        </li>
      </ul>
      <form class="d-flex">
        <input type="search" class="form-control me-2" placeholder="検索..." aria-label="検索...">
        <button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
      </form>
    </div>
  </div>
</nav>

上記のコードは、公式マニュアルを参考に、不動産屋のサイトをイメージして作りました。

ナビゲーションバーの色を変える

ナビゲーションバーの色を変えることもできます。

見本のように明るい背景色であればnavbar-lightクラスを使い、暗ければnavbar-darkクラスにします。

背景色を付けるには、nav要素にbg-*のクラスを付与します。以下に青色に変更したサンプルコードを示します。今回はさらに検索ボタンの色も変えるため、button要素について、btn-outline-successクラスからbtn-outline-lightクラスに変更しています。

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ほげ不動産</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navber" aria-controls="Navber" aria-expanded="false">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="Navber">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">会社概要</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            物件情報
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">賃貸</a></li>
            <li><a class="dropdown-item" href="#">新築</a></li>
            <li><a class="dropdown-item" href="#">中古</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">土地</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">採用情報</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">お問い合わせ</a>
        </li>
      </ul>
      <form class="d-flex">
        <input type="search" class="form-control me-2" placeholder="検索..." aria-label="検索...">
        <button type="submit" class="btn btn-outline-light flex-shrink-0">検索</button>
      </form>
    </div>
  </div>
</nav>

ナビゲーションバーのメニューを右寄せにする

ナビゲーションバーのメニューを右寄せにできます。

ul要素のme-autoクラスが左寄せのため、これを右寄せのms-autoに変更します。

メニューを右寄せにする場合、検索がない方がすっきりするため、以下にそのサンプルコードを示します。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ほげ不動産</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navber" aria-controls="Navber" aria-expanded="false">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="Navber">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">会社概要</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            物件情報
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">賃貸</a></li>
            <li><a class="dropdown-item" href="#">新築</a></li>
            <li><a class="dropdown-item" href="#">中古</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">土地</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">採用情報</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">お問い合わせ</a>
        </li>
      </ul>
    </div>
  </div>
</nav>