常時折り畳まれているナビゲーションバー .navbar

 <nav class="navbar bg-body-secondary" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ナビゲーションバー</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav me-auto mb-2">
          <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">
            <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form role="search">
          <input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

常時展開しているナビゲーションバー .navbar.navbar-expand

 <nav class="navbar navbar-expand bg-body-secondary" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav me-auto">
          <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">
            <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

ビューポート小以上で展開するナビゲーションバー .navbar.navbar-expand-sm

 <nav class="navbar navbar-expand-sm bg-body-secondary" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav me-auto mb-2 mb-sm-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">
            <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

ビューポート中以上で展開するナビゲーションバー .navbar.navbar-expand-md

 <nav class="navbar navbar-expand-md bg-body-secondary" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav me-auto mb-2 mb-md-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">
            <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

ビューポート大以上で展開するナビゲーションバー .navbar.navbar-expand-lg

 <nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <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">
            <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

ビューポート特大以上で展開するナビゲーションバー .navbar.navbar-expand-xl

 <nav class="navbar navbar-expand-xl bg-body-secondary" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav me-auto mb-2 mb-xl-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">
            <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

ビューポート超特大以上で展開するナビゲーションバー .navbar.navbar-expand-xxl v5.0.0-alpha1追加

 <nav class="navbar navbar-expand-xxl bg-body-secondary" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav me-auto mb-2 mb-xl-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">
            <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

nav.navbar > div.container のナビゲーションバー

  <nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark">
    <div class="container">
      <a class="navbar-brand" href="#">コンテナ</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <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">
          <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

nav.navbar > div.container-xl（レスポンシブ・コンテナ）のナビゲーションバー

.container-xlと一致...

  <nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark">
    <div class="container-xl">
      <a class="navbar-brand" href="#">XLコンテナ</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <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">
            <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control" type="text" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

  <div class="container-xl mb-4">
    .container-xlと一致...
  </div>

折り畳みボタンが左側にあるナビゲーションバー

  <nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark">
    <div class="container">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">ブランド</a>

      <div class="collapse navbar-collapse" id="navbar">
        <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">
          <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

中央揃えのナビゲーションバー .navbar-collapse.justify-content-md-center

  <nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse justify-content-md-center" id="navbar">
        <ul class="navbar-nav">
          <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">
            <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

div.container > nav.navbar の灰色ナビゲーションバー

  <nav class="navbar navbar-expand-lg bg-body-tertiary rounded">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <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">
          <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
        </form>
      </div>
    </div>
  </nav>

灰色の中央揃えのナビゲーションバー

  <nav class="navbar navbar-expand-lg bg-body-tertiary rounded">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse justify-content-md-center" id="navbar">
        <ul class="navbar-nav">
          <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">
          <a class="nav-link disabled" aria-disabled="true">無効</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">リンク1</a></li>
              <li><a class="dropdown-item" href="#">リンク2</a></li>
              <li><a class="dropdown-item" href="#">リンク3</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

ユーティリティを含む灰色の中央揃えのナビゲーションバーv5.2.3追加

  <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="ナビゲーションの実例">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample25" aria-controls="navbarsExample25" aria-expanded="false" aria-label="ナビゲーションの切替">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse d-lg-flex" id="navbarsExample25">
          <a class="navbar-brand col-lg-3 me-0" href="#">ブランド</a>
          <ul class="navbar-nav col-lg-6 justify-content-lg-center">
            <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">
              <a class="nav-link disabled" aria-disabled="true">無効</a>
            </li>
            <li class="nav-item dropdown">
              <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">リンク1</a></li>
                <li><a class="dropdown-item" href="#">リンク2</a></li>
                <li><a class="dropdown-item" href="#">リンク3</a></li>
              </ul>
            </li>
          </ul>
          <div class="d-lg-flex col-lg-3 justify-content-lg-end">
            <button class="btn btn-primary">ボタン</button>
          </div>
        </div>
      </div>
    </nav>

ナビゲーションバーの実例

この実例は、ナビゲーションバーとその内容がどのように機能するかを簡単に示している。ナビゲーションバーによってはビューポートの幅が拡張されるものもあれば、.container 内に限定されるものもある。ナビゲーションバーの配置については、静的トップとトップ固定の実例を確認すること。

極小のブレークポイントでは、リンクを非表示にするための折りたたみプラグインが使用され、折り畳まれたコンテンツを切り替えるメニューボタンが表示される。

ナビゲーションバーの解説へ »