【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう！

Bootstrap4の使い方、第４回目となりました。

サイトを作っていると必然的に必要になるのがパンくずリストです。
パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりやすく示すものです。

Bootstrapを使うと、そのパンくずリストも簡単に作れてしまいます。
今回はBootstrap4を使ったパンくずリストの作り方を紹介したいと思います。

パンくずリスト(breadcrumb)の作り方

パンくずリストの作成方法です。
今回はパンくずリストをnavタグで囲って作っていきます。

<nav>
</nav>

aria-label属性を指定しておきます。

<nav aria-label="breadcrumb">
</nav>

これがパンくずリスト全体ということになります。
その中にアイテムを追加していきます。

パンくずリストというぐらいですので、リストタグを使って作っていきます。
ulもしくはolタグで作っていきますが、パンくずリストは親から子への順番が決まっているものですので、olタグを使うほうがいいかと思います。

また、olタグには「breadcrumb」というクラスを指定しておきましょう。

さて、今現在作成しているページが「猫の食べ物について」という記事だったとします。
なのでolタグのなかにそのタイトルを入れていきます。

パンくずリストの中のアイテムとして、「breadcrumb-item」というクラスを当てましょう。

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item">猫の食べ物について</li>
	</ol>
</nav>

さらにトップページとその記事があるカテゴリーを作ります。
今回の記事は、「動物」カテゴリーの中の「猫」カテゴリー内にあるとします。

もちろん、カテゴリーにはそのカテゴリーページにジャンプするようにリンクを貼る必要があります。

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">トップ</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">動物</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">猫</a></li>
		<li class="breadcrumb-item">猫の食べ物について</li>
	</ol>
</nav>

さらに、現在いるページには「active」というクラスを当てます。
今回であれば、５行目の「猫の食べ物について」の部分です。これで現在いるページ部分の文字色が変わります。

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">トップ</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">動物</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">猫</a></li>
		<li class="breadcrumb-item active">猫の食べ物について</li>
	</ol>
</nav>

見た目はこれで十分なのですが、アイテムの最後には「aria-current=”page”」をつけておきましょう。

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">トップ</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">動物</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">猫</a></li>
		<li class="breadcrumb-item active" aria-current="page">猫の食べ物について</li>
	</ol>
</nav>

さて、これでパンくずリストの完成です。
実際に作ったものはこちらになります。

まとめ

いかがでしたでしょうか。
パンくずリストはサイトを作成していると必ずと言っていいほど必要になってくる大切なパーツです。
パンくずリストがあることで、サイトを訪れた人が、このページはどういう構造になっているのかを一瞬で理解でき、自分が今どこにいるのかを直感的に知ることができます。

Bootstrapを使うことで、そんなパンくずリストを簡単に作ることができますので、興味がある方はぜひお試しください。
そんなわけで、Bootstrap4でのパンくずリストの作り方でした。

参考サイト

参考サイト : Bootstrap 公式ページ

このシリーズの一覧はこちら

1. Bootstrap5を読み込む為の方法を徹底解説
2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう！
5. Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法！
6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法！

• Tweet
• Facebook
• はてブ
• Pocket