Bootstrap 5 ナビゲーション

ナビゲーションメニュー

シンプルな水平メニューを作成するには、 .nav クラスを追加する <ul> 要素を追加し、各 <li> 要素に追加します。 .nav-item そして、 .nav-link このクラスを使用してリンクに追加します：

例

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

自分で試してみる

ナビゲーションバーをアライメントします。

追加 .justify-content-center このクラスを使用してナビを中央寄せにし、追加 .justify-content-end このクラスを使用してナビを右寄せにします。

例

<!-- 中央寄せのナビ -->
<ul class="nav justify-content-center">
<!-- 右寄せのナビ -->
<ul class="nav justify-content-end">

自分で試してみる

垂直ナビゲーションバー

追加 .flex-column クラスを使用すると垂直ナビゲーションを作成できます：

例

<ul class="nav flex-column">

自分で試してみる

タブ

次を使用してください .nav-tabs クラスを使用してナビゲーションメニューをナビゲーションタブに変換し、 .active クラスをアクティブ/現在のリンクに追加します。タブを切り替え可能にするには、このページの最後の例を参照してください。

例

<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" 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" href="#">リンク</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">無効</a>
  </li>
</ul>

自分で試してみる

等幅のタブ/カプセルナビゲーション

次を使用してください .nav-justified 等幅のクラス（等幅）でタブ/カプセルを整列：

例

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

自分で試してみる

カプセルのドロップダウンメニュー

例

<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="#">ドロップダウン</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>
  <li class="nav-item">
    <a class="nav-link" href="#">リンク</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">無効</a>
  </li>
</ul>

自分で試してみる

タブのドロップダウンメニュー

例

<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="#">ドロップダウン</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>
  <li class="nav-item">
    <a class="nav-link" href="#">リンク</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">無効</a>
  </li>
</ul>

自分で試してみる

切り替え可能な / ドラッグダウンタブ

タブを切り替え可能にするには、 data-toggle="tab" 属性を各リンクに追加します。各タブにユニークなIDを持つ .tab-pane クラスを追加し、それらを .tab-content クラスを追加し、それらを <div> 要素に

タブがクリック時にフェードイン/アウトするようにするには、 .fade クラスを追加する .tab-pane：

例

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

自分で試してみる

切り替え可能な / ドイツ語のカプセルナビゲーション

ナビゲーションに同じコードが適用されます；data-toggle 属性を変更するだけで良いです。 data-toggle="pill" すぐに：

例

<!--ナビゲーションカプセル -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">春日</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">初夏</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">山行</a>
  </li>
</ul>
<!-- 选项卡窗格 -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

自分で試してみる