Bootstrap5 ナビゲーション

シンプルな水平ナビゲーションバーを作成するには、<ul>要素に追加します.navクラスを、各<li>項目に追加します.nav-itemクラスを、各リンクに追加します.nav-linkクラス:

例

<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

試してみる »

ナビゲーションの整列方法

.justify-content-centerクラスはナビゲーションを中央に表示し、.justify-content-endクラスはナビゲーションを右寄せにします。

例

<!--ナビゲーション中央寄せ--> <ul class="nav justify-content-center"> <!--ナビゲーション右寄せ--> <ul class="nav justify-content-end"> </div>

試してみる »

垂直ナビゲーション

.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="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

試してみる »

ピルナビゲーション

.nav-pillsクラスはナビゲーション項目をピル形状に設定できます。

例

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</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="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

試してみる »

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

例

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

試してみる »

動的タブ

タブを動的に切り替えられるように設定するには、各リンクにdata-bs-toggle="tab"属性を追加します。.tab-paneクラスを、対応するタブのコンテンツの<div>タグには.tab-contentクラスを使用します。

フェードイン効果が必要な場合は、.tab-pane後に追加します .fadeクラス:

例

<!-- 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 active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

試してみる »

ピル状の動的タブ

ピル状の動的タブは、上記の例のコードで data-bs-toggle 属性をdata-bs-toggle="pill":

例

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

試してみる »
その他の拡張