navbar navbar-dark bg-dark

html bootstrap5 Sample

ナビゲーションバー基本：navbarとnavbar-brandとcollapse

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- TOPは常に表示 -->
    <a class="navbar-brand" href="#">TOP</a>
    <!-- navbar-togglerでレスポンシブ -->
    <!-- レスポンシブ状態でないと、トグルアイコンは非表示になり、メニューが表示される -->
    <!-- レスポンシブになると、トグルアイコンが表示され、メニューは非表示になる -->
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"
      aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav2">
      <!-- メニューはulとliを使う -->
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">メニュー1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">メニュー2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
      </ul>
    </div>
  </nav>

ナビバーとコンテナ：container

コンテンツcontainer

コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。 

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">TOP</a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav22"
        aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav22">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">メニュー1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">メニュー2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- ここから、コンテンツが始まる -->
  <div class="container bg-light">
    <h4>コンテンツcontainer</h4>
    <p>
      コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。
    </p>
  </div>

ナビバーの検索窓：form-inline

  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <!-- 画面が狭い時はアイコン、画面が広い時メニューを表示 -->
    <a class="navbar-brand" href="#">TOP</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">メニュー1</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>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

外部コンテンツの表示／非表示：navbar-togglerとnavbar-toggler-icon

  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">折り畳みコンテンツ</h4>
      <span class="text-muted">ナビゲーションバーブランド経由で切り替え可</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent"
      aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>

ナビバーの中に入力グループ

  <nav class="navbar navbar-dark bg-dark">
    <form class="form-inline">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">@</span>
        </div>
        <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
      </div>
    </form>
  </nav>

ナビゲーションドロップダウンメニュー：dropdown-toggle

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <!-- dropdown-toggleを使う -->
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenu" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            ドロップダウンメニュー
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenu">
            <a class="dropdown-item" href="#">サブメニュー1</a>
            <a class="dropdown-item" href="#">サブメニュー2</a>
            <a class="dropdown-item" href="#">サブメニュー3</a>
          </div>
        </li>
        <li class="nav-item active"><a class="nav-link" href="#">メニュー1</a></li>
        <li class="nav-item active"><a class="nav-link" href="#">メニュー2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
      </ul>
    </div>
  </nav>

ナビゲーションバー内テキスト：navbar-text

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarText"
      aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav">
        <li class="nav-item active"><a class="nav-link" href="#">ホーム </a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
      </ul>
      <!-- ナビバー内にテキストを表示したい場合 -->
      <span class="navbar-text ml-auto">ナビゲーションバーテキスト</span>
    </div>
  </nav>

ナビゲーションバー 切替ボタンを左寄せに表示：mr-auto

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav02"
      aria-controls="navbarNav02" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">ブランド</a>
    <div class="collapse navbar-collapse" id="navbarNav02">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

ナビゲーションバーアイコンしか出さない

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- navbar-brand -->
    <a class="navbar-brand" href="#">TOP</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2"
      aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav2">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <a class="navbar-brand" href="#">ブランドを隠す</a>
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

navbar-brand画像：navbar-brand

  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
      <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      Bootstrap
    </a>
  </nav>

ボタン：navbar

  <nav class="navbar navbar-dark bg-dark">
    <form class="form-inline">
      <button class="btn btn-light mr-3" type="button">通常のボタン</button>
      <button class="btn btn-sm btn-light" type="button">小サイズのボタン</button>
    </form>
  </nav>

ナビバーのデザイン：navbar-darkとbg-dark

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <!-- アウトラインの検索ボタン、darkだど映える -->
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>