navbar

bootstrap5.css

bootstrap5.css
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
bootstrap5.css
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
bootstrap5.css
.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
bootstrap5.css
.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
bootstrap5.css
.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}
bootstrap5.css
.navbar-nav .dropdown-menu {
  position: static;
}
bootstrap5.css
.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
bootstrap5.css
.navbar-collapse {
  align-items: center;
  width: 100%;
}
bootstrap5.css
.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
bootstrap5.css
.navbar-toggler:hover {
  text-decoration: none;
}
bootstrap5.css
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0.25rem;
}
bootstrap5.css
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
bootstrap5.css
@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 1400px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
bootstrap5.css
.navbar-expand .navbar-nav {
  flex-direction: row;
}
bootstrap5.css
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
bootstrap5.css
.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
bootstrap5.css
.navbar-expand .navbar-collapse {
  display: flex !important;
}
bootstrap5.css
.navbar-expand .navbar-toggler {
  display: none;
}
bootstrap5.css
.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.55);
}
bootstrap5.css
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}
bootstrap5.css
.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}
bootstrap5.css
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.1);
}
bootstrap5.css
.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.55);
}
bootstrap5.css
.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-dark .navbar-brand {
  color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
  color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.55);
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}
bootstrap5.css
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}
bootstrap5.css
.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.55);
}
bootstrap5.css
.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: #fff;
}

html bootstrap5 Sample

js ナビゲーションバー基本:navbarとnavbar-togglerとcollapseとnavbar-toggler-icon


    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <!-- TOPは、ブラントとして常に表示 -->
      <a class="navbar-brand" href="#">TOP</a>
      <!-- navbar-togglerでレスポンシブ -->
      <!-- レスポンシブ状態でないと、トグルアイコンは非表示になり、メニューが表示される -->
      <!-- レスポンシブになると、トグルアイコンが表示され、メニューは非表示になる -->
      <!-- data-bs-targetとidでコンテンツを連携させる -->
      <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Nav1" aria-controls="Nav1"
        aria-expanded="false" aria-label="ナビゲーションの切替">
        <!-- ハンバーガーメニューでボタンを表示 navbar-toggler-icon -->
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- ボタンが押されたら、以下のメニューを開く、メニューはulとliを使う -->
      <div class="collapse navbar-collapse" id="Nav1">
        <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>

js ナビバーの検索窓:d-flex


    <nav class="navbar navbar-expand navbar-light bg-light">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav3"
          aria-controls="Nav3" aria-expanded="false" aria-label="ナビゲーション切替">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="Nav3">
          <!-- 画面が狭い時はアイコン、画面が広い時メニューを表示 -->
          <a class="navbar-brand" href="#">TOP</a>
          <ul class="navbar-nav me-auto">
            <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="d-flex">
            <!-- inputにform-controlを適用しない -->
            <input class="me-2" type="search" placeholder="検索" aria-label="検索">
            <button class="btn btn-light" type="submit">検索</button>
          </form>
        </div>
      </div>
    </nav>

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


    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">ブランド</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                ドロップダウンメニュー
              </a>
              <div class="dropdown-menu" aria-labelledby="ドロップダウンメニュー">
                <!-- dropdown-menuは  display: none -->
                <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>
      </div>
    </nav>

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


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">ブランド</a>
      <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-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 ms-auto">ナビゲーションバーテキスト</span>
      </div>
    </nav>

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


    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-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="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-outline-light my-2 my-sm-0"  style="background-color: #e3f2fd;" type="submit">Search</button>
        </form>
      </div>
    </nav>

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


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <!-- navbar-brand -->
      <a class="navbar-brand" href="#">TOP</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav5" aria-controls="Nav5"
        aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="Nav5">
        <ul class="navbar-nav me-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="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

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


    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mt-2 mt-lg-0">
          <li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="visually-hidden">(現位置)</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="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

js ナビバーのデザイン:navbar-lightとbg-light


    <!-- bg-*はbootstrapの背景色の指定方法、できるだけこれを使うとことで構造化が進む、Core Web Vitals(コアウェブバイタル)にも有効 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav_d"
        aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav_d">
        <ul class="navbar-nav me-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="d-flex">
          <input class="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>

js ナビバーbg-以外で背景色を直接指定:background-color


  <!-- navbar-*はテキストの色 -->
  <!-- navbar-expand-* は@mediaだったら適用するという指定 -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light" style="background-color: #e3f2fd;">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav9" aria-controls="Nav9"
        aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="Nav9">
        <ul class="navbar-nav me-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>
        <form class="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

navbar-brandに画像:navbar-brand


    <nav class="navbar navbar-dark bg-success">
      <a class="navbar-brand" href="#">
        <img src="https://bttb.jp/assets/img/logo-small-2.png" width="30" height="30" class="d-inline-block align-top"
          alt="">
        Bootstrap
      </a>
    </nav>