nav-item nav-link

bootstrap5.css

bootstrap5.css
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
bootstrap5.css
.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}
bootstrap5.css
.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

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>

カード内にピル型ナビゲーションを組み込む:nav-pillsとcard-header-pills


カードのタイトル

カードの内容

ボタン
  <div class="card">
    <div class="card-header">
      <!-- ピル型のナビゲーション:card-header-pills -->
      <ul class="nav nav-pills card-header-pills">
        <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 class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p> <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

カードにナビゲーションを組み込む:nav-tabs


カードのタイトル

カードの内容

ボタン
  <div class="card">
    <!-- カードのヘッダー -->
    <div class="card-header">
      <!-- タブ型のナビゲーション:card-header-tabs -->
      <ul class="nav nav-tabs card-header-tabs">
        <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 class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

ナビゲーション:navとnav-itemとnav-link


  <ul class="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 disabled" href="#">無効</a></li>
  </ul>

ナビゲーション中央寄せ:justify-content-center


  <ul class="nav justify-content-center">
    <!-- 中央寄せ flexbox utilitiesを使う-->
    <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 disabled" href="#">無効</a></li>
  </ul>

ナビゲーション右寄せ:justify-content-end


  <!-- デフォルトは左寄せなので、特にclassは用意されていない -->
  <ul class="nav justify-content-end">
    <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 disabled" href="#">無効</a></li>
  </ul>

ナビゲーションを垂直(縦)に並べる:flex-column


  <!-- サイドメニューで使える -->
  <ul class="nav flex-column">
    <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 disabled" href="#">無効</a></li>
  </ul>

ピル型ナビゲーション:nav-pills


  <ul class="nav nav-pills">
    <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 disabled" href="#">無効</a></li>
  </ul>

ナビゲ―ション項目の幅を調整:nav-fill


  <!-- 幅いっぱいで調整される -->
  <nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">アクティブ</a>
    <a class="nav-item nav-link" href="#">リンク</a>
    <a class="nav-item nav-link disabled" href="#">無効</a>
  </nav>

ナビゲ―ション項目の画面一杯:nav-fill


  <!-- 収まらない場合は、改行される -->
  <nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">リンク1</a>
    <a class="nav-item nav-link" href="#">リンク2</a>
    <a class="nav-item nav-link active" href="#">長いテキストリンク</a>
    <a class="nav-item nav-link" href="#">リンク3</a>
  </nav>

ナビゲ―ション項目の幅を調整:nav-justified


  <!-- 同じ幅になる、収まらない場合は高さが変わる -->
  <nav class="nav nav-pills nav-justified">
    <a class="nav-item nav-link active" href="#">リンク1</a>
    <a class="nav-item nav-link" href="#">リンク2</a>
    <a class="nav-item nav-link active" href="#">長いテキストリンク</a>
    <a class="nav-item nav-link" href="#">リンク3</a>
  </nav>

js ピル型ナビゲーションドロップダウン:nav-linkとdropdown-toggle


  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

タブ型ナビゲーション:nav-tabs


  <ul class="nav nav-tabs">
    <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 disabled" href="#">無効</a></li>
  </ul>

js タブ型ナビゲーションドロップダウン:dropdown-toggle


  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

js タブパネル:navとnav-tabsとdata-bs-toggleとtablist


ホームのコンテンツ
プロフィールのコンテンツ
コンタクトのコンテンツ
  <!-- タブ部分 -->
  <!-- role="tablist"、 role="tab"、 role="tabpanel"、aria- 属性が必要 -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab"
        aria-controls="home" aria-selected="true">ホーム</a></li>
    <li class="nav-item"><a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab"
        aria-controls="profile" aria-selected="false">プロフィール</a></li>
    <li class="nav-item"><a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab"
        aria-controls="contact" aria-selected="false">コンタクト</a></li>
  </ul>
  <!-- パネル部分 -->
  <!-- herfの#とidで切り替える -->
  <div class="tab-content mt-3" id="myTabContent">
    <!-- tab-pane fade show active -->
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツ</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツ</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツ</div>
  </div>