Bootstrapナビバーの作り方
レスポンシブ対応ナビゲーション
Bootstrapのnavbarコンポーネントを使えば、PC表示ではメニューが横並び、スマホ表示ではハンバーガーメニューに切り替わるナビゲーションバーを簡単に作れます。
この記事では、基本的なナビバーの構築からカスタマイズまでを解説します。
こんな人向けの記事です
- サイトにナビゲーションバーを追加したい
- スマホ対応のハンバーガーメニューを実装したい
- Bootstrapのnavbarコンポーネントの使い方を知りたい
Step 1最小構成のナビバー
まずは最小限のナビバーを作ります。navbar と navbar-expand-lg がベースのクラスです。
MySite
HTML
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MySite</a>
</div>
</nav>| クラス | 役割 |
|---|---|
navbar | ナビバーの基本スタイルを適用 |
navbar-expand-lg | 992px以上でメニューを展開、未満でハンバーガー |
navbar-dark | テキストを白系にする（暗い背景用） |
bg-dark | 背景色を暗くする |
navbar-brand | サイト名やロゴ部分 |
Step 2ナビリンクを追加する
navbar-nav の中に nav-item と nav-link でリンクを追加します。
MySite
ホーム
機能
料金
HTML
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MySite</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">ホーム</a>
</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>
</nav>activeクラスについて
現在のページに対応するリンクに active クラスを付けると、そのリンクが強調表示されます。ユーザーが今どのページにいるかを視覚的に示せます。
Step 3ハンバーガーメニュー（レスポンシブ対応）
スマホ表示でハンバーガーアイコンを表示し、クリックでメニューを開閉できるようにします。
HTML
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MySite</a>
<!-- ハンバーガーボタン（スマホ表示時のみ出現） -->
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<!-- メニュー本体（スマホでは折りたたまれる） -->
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">ホーム</a>
</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>data-bs-target と id を一致させる
data-bs-target="#navMenu" と id="navMenu" が一致していないとメニューが開閉しません。また、Bootstrap 5 の JavaScript（
bootstrap.bundle.min.js）の読み込みが必要です。
Step 4配色を変更する
背景色は bg-* クラスで簡単に変更できます。
| クラス | 背景色 | テキスト設定 |
|---|---|---|
bg-dark | 黒 | navbar-dark と組み合わせ |
bg-primary | 青 | navbar-dark と組み合わせ |
bg-light | 白/薄グレー | navbar-light と組み合わせ |
bg-success | 緑 | navbar-dark と組み合わせ |
bg-warning | 黄 | navbar-light と組み合わせ |
navbar-dark と navbar-light の使い分け
背景が暗い色 → navbar-dark（テキストが白系になる）背景が明るい色 →
navbar-light（テキストが黒系になる）
Step 5ドロップダウンメニュー
ナビバーにドロップダウンメニューを追加することもできます。
HTML
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
data-bs-toggle="dropdown">
サービス
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Web制作</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>まとめ
Bootstrapのnavbarを使えば、レスポンシブ対応のナビゲーションバーが少ないコードで実装できます。
navbar+navbar-expand-lgがベースnavbar-togglerでハンバーガーメニューを実現collapse navbar-collapseで開閉するメニュー本体を囲むbg-*とnavbar-dark/lightで配色を調整dropdownで階層メニューも追加可能