メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

パンくずリスト(Breadcrumb) v4.0.0設定変更

ナビゲーション階層内の現在のページの位置を指定し、CSSを介してセパレータを自動的に追加。

実例(Example)v4.0.0-beta.2設定変更

見本
Bootstrap3.xの設定例 赤背景が変更箇所
親のみ<ol class="breadcrumb">
	<li class="active">ホーム</li>
</ol>
親 > 子<ol class="breadcrumb">
	<li><a href="#">ホーム</a></li>
	<li class="active">ライブラリ</li>
</ol>
親 > 子 > 孫<ol class="breadcrumb" style="margin-bottom: 5px;">
	<li><a href="#">ホーム</a></li>
	<li><a href="#">ライブラリ</a></li>
	<li class="active">データ</li>
</ol>
Bootstrap4.xの設定例 緑背景が変更箇所
親のみ<nav aria-label="パンくずリスト">
	<ol class="breadcrumb">
		<li class="breadcrumb-item active" aria-current="page">ホーム</li>
	</ol>
</nav>
親 > 子<nav aria-label="パンくずリスト">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">ホーム</a></li>
		<li class="breadcrumb-item active" aria-current="page">ライブラリ</li>
	</ol>
</nav>
親 > 子 > 孫<nav aria-label="パンくずリスト">
	<ol class="breadcrumb mb-1">
		<li class="breadcrumb-item"><a href="#">ホーム</a></li>
		<li class="breadcrumb-item"><a href="#">ライブラリ</a></li>
		<li class="breadcrumb-item active" aria-current="page">データ</li>
	</ol>
</nav>

【設定】

  • <nav> > ol.breadcrumbul.breadcrumb でも可) > li.breadcrumb-item
  • 現在のページをアクティブ化したい場合は、li.breadcrumb-item.active を追加してアンカーリンクを外す
  • ナビゲーションが長くなる場合は、空白ユーティリティなどで余白を調整

アクセシビリティの設定】

  • <nav> に、aria-label 属性(代替テキスト)を入れる
  • li.breadcrumb-item.active に、aria-current="page"(現在のページを表す)を入れる

【変更履歴】

  • 【v4.0.0-beta.2】リストで設定する場合も <nav> で囲むことと、アクセシビリティの設定を追加し、nav.breadcrumb > a.breadcrumb-item での設定は取り止め

【Bootstrap3.xとの変更箇所】

  • ol.breadcrumb > li<nav> > ol.breadcrumb > li.breadcrumb-item

 

セパレータの変更(Changing the separator)v4.1.0新設

セパレータは、::beforecontent を介して自動的にCSSに追加。$breadcrumb-divider を変更することで変更可能。quote関数は文字列の周りに引用符を生成するために必要なので、> をセパレータとして使いたい場合は、次のように使用:

$breadcrumb-divider: quote(">");

base64の埋め込みSVGアイコンも使用可能:

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

セパレータは、$breadcrumb-dividernone に設定することで削除可能。

$breadcrumb-divider: none;

 

アクセシビリティ(Accessibility)

パンくずリストはナビゲーションを提供するので、<nav> 要素で提供されるナビゲーションのタイプを記述するために aria-label="パンくずリスト" のような意味のあるラベルを追加し、現在のページを表すことを示すために aria-current="page" をセットの最後の項目に適用すること。

詳細については、WAI-ARIA Authoring Practices for the breadcrumb patternを参照するように。