【Bootstrapのコンポーネント】ナビゲーション（Navs）に関して

記事内に商品プロモーションを含む場合があります

今回はBootstrap4のナビゲーションコンポーネントについて解説します。

ナビゲーションは、本記事をご覧の皆さんは見たことあるかと思いますが、リンク先に飛ばすナビゲーションです。
このナビゲーションには、2つのコーディング方法があります。

コーディング方法は下記の通り。

■ulを使用する方法

■navを使用する方法

 

公式ドキュメントでは、ulを使用したナビゲーションで、その幾つかの種類を解説していますので、それに合わせてulを使用するのが無難かと思います。

ナビゲーションの種類

また、その種類もここで紹介します。
種類は次の通りです。

■通常のナビゲーション

■タブ型ナビゲーション

■ピル型ナビゲーション

■ドロップダウン組み込み型ナビゲーション

では、それぞれの記述方法について見ていきましょう。

ナビゲーションの記述方法

ulを使用するか、navを使用するか問題

先程もお伝えした通り、ナビゲーションの書き方には2種類あって、ulかnavタグかがありますが、ここでは、よりカスタマイズ性のあるulを使用するとします。

もしnavを使用したい場合は、ulの親要素として使用すると良いです。

通常のナビゲーション

通常タイプ

1.     <div class=”container”>
2.       <ul class=”nav“>
3.         <li class=”nav-item“>
4.             <a class=”nav-link active” href=”#”>アクティブ</a>
5.         </li>
6.         <li class=”nav-item”>
7.             <a class=”nav-link” href=”#”>リンク</a>
8.         </li>
9.         <li class=”nav-item”>
10.             <a class=”nav-link” href=”#”>リンク</a>
11.         </li>
12.         <li class=”nav-item”>
13.             <a class=”nav-link disabled” href=”#”>非活性</a>
14.         </li>
15.       </ul>
16.     </div>

 

activeクラスは、解説がなかったのですが、「そのページを現在見ています」くらいの意味でしょうか（詳細不明）。
ただし、次でお伝えしているタブ型だとactiveクラスを当てることで装飾に違いが生じます（詳しくは後述）。

disabledはご覧の通り非活性を意味し、そのページには飛べないようになっています。

普通のなんてことのないナビゲーションです。

タブ型ナビゲーション

タブ型は少し装飾がついたものです。
nav-tabsクラスを追加するだけで変わります。

タブ型

1.     <div class=”container”>
2.       <ul class=”nav nav-tabs“>
3.         <li class=”nav-item”>
4.             <a class=”nav-link active” href=”#”>アクティブ</a>
5.         </li>
6.         <li class=”nav-item”>
7.             <a class=”nav-link” href=”#”>リンク</a>
8.         </li>
9.         <li class=”nav-item”>
10.             <a class=”nav-link” href=”#”>リンク</a>
11.         </li>
12.         <li class=”nav-item”>
13.             <a class=”nav-link disabled” href=”#”>非活性</a>
14.         </li>
15.       </ul>
16.     </div>

 

タブ型になりました。

画像では、activeクラスが一番最初のliタグに来ていますが、これを移動させると以下の画像のように装飾が変わります。

これだと違いが明確ですね。

ピル型ナビゲーション

ピル型は少し角丸がついたナビゲーションです。
こちらも同様にnav-pillsクラスを追加するだけです。
ピル型

1.     <div class=”container”>
2.       <ul class=”nav nav-pills“>
3.         <li class=”nav-item”>
4.             <a class=”nav-link active” href=”#”>アクティブ</a>
5.         </li>
6.         <li class=”nav-item”>
7.             <a class=”nav-link” href=”#”>リンク</a>
8.         </li>
9.         <li class=”nav-item”>
10.             <a class=”nav-link” href=”#”>リンク</a>
11.         </li>
12.         <li class=”nav-item”>
13.             <a class=”nav-link disabled” href=”#”>非活性</a>
14.         </li>
15.       </ul>
16.     </div>

 

ピル型もactiveクラスを追加する箇所に、フォーカスが当たる（背景が青色に変化する）ようになっています。

ドロップダウン組み込み型ナビゲーション

ラストは、ドロップダウンを組み込んだナビゲーションです。
これはコードが変わって、ちょっと複雑になります。
ドロップダウン型

1.     <div class=”container”>
2.       <ul class=”nav nav-tabs”>
3.         <li class=”nav-item”>
4.             <a class=”nav-link” href=”#”>アクティブ</a>
5.         </li>
6.         <li class=”nav-item dropdown“>
7.             <a class=”nav-link dropdown-toggle” data-toggle=”dropdown” href=”#”>リンク</a>
8.             <div class=”dropdown-menu“>
9.               <a class=”dropdown-item” href=”#”>ドロップダウンメニュー1</a>
10.               <a class=”dropdown-item” href=”#”>ドロップダウンメニュー2</a>
11.               <a class=”dropdown-item” href=”#”>ドロップダウンメニュー3</a>
12.               <div class=”dropdown-divider“></div>
13.               <a class=”dropdown-item” href=”#”>ドロップダウンメニュー4</a>
14.             </div>
15.         </li>
16.         <li class=”nav-item”>
17.             <a class=”nav-link” href=”#”>リンク</a>
18.         </li>
19.         <li class=”nav-item”>
20.             <a class=”nav-link disabled” href=”#”>非活性</a>
21.         </li>
22.       </ul>
23.     </div>

 

区切り線を入れたい場合は、次のコードを入れてください。

<div class="dropdown-divider"></div>

 

サンプルコードでは、「ドロップダウンメニュー3」と「ドロップダウンメニュー4」の間に入れています。

まとめ

Bootstrap4のナビゲーションコンポーネントについて解説しました。

ナビゲーションコンポーネントには、ulタグとnavタグを使う方法がありますが、本記事では、カスタマイズ性のあるulタグで説明しています。

その種類は下記の通りでした。

■通常のナビゲーション

■タブ型ナビゲーション

■ピル型ナビゲーション

■ドロップダウン組み込み型ナビゲーション

 

ナビゲーションはwebサイトには必ず使用されているものなので、使えて損はないと思います。

ぜひ、使ってみてください。