【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タグに来ていますが、これを移動させると以下の画像のように装飾が変わります。

activeクラスを【リンク】にした場合

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

ピル型ナビゲーション

ピル型は少し角丸がついたナビゲーションです。
こちらも同様に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クラスを追加する箇所に、フォーカスが当たる(背景が青色に変化する)ようになっています。

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-toggledata-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サイトには必ず使用されているものなので、使えて損はないと思います。

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