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

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

パンくずリスト（Breadcrumb） v4.0.0設定変更

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

実例（Example）v4.0.0設定変更

見本
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.breadcrumb（ul.breadcrumb でも可） > li.breadcrumb-item
  • 現在のページをアクティブ化したい場合は、li.breadcrumb-item に .active を追加してアンカーリンクを外す
  • ナビゲーションが長くなる場合は、空白ユーティリティなどで余白を調整

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

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

【変更履歴】

  • 【v4.0.0】
    • ol.breadcrumb > li ⇒ <nav> > ol.breadcrumb > li.breadcrumb-item

 

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

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

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

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

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

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

Sass$breadcrumb-divider: none;

 

アクセシビリティ（Accessibility）

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

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

ページ移動