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

パンくずリスト（Breadcrumb） v5.0.0-beta1スタイル変更

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

目次

実例（Example）v5.0.0-beta1スタイル変更

リンクリストアイテムを含む順序付きリストか順序なしリストを使用して、最小限のスタイルのパンくずリストを作成。ユーティリティを使用して、必要に応じてスタイルを追加。

見本
設定例
親のみ<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"（支援技術に現在のページであることを伝える）を入れる
【変更履歴】
  • 【v5.0.0-beta1】
    • .breadcrumb の設定で padding を 0 に、background-color と border-radius の設定を削除して外観を簡素化

 

仕切り（Dividers）v5.0.0-beta1設定変更

仕切りは、::beforeとcontentを経由してCSSに自動的に追加される。これらは、ローカルのCSSカスタムプロパティ --bs-breadcrumb-divider を変更するか、必要に応じて scss/_variables.scss 内の $breadcrumb-divider Sass変数やRTL（右書き）に対応する $breadcrumb-divider-flipped Sass変数を使用して変更できる。デフォルトでは、カスタムプロパティへのフォールバックとして設定されているSass変数を使用しているので、CSSをいつでも再コンパイルせずに再定義できるグローバルな仕切りを取得。

見本
設定例
HTMLで設定<nav style="--bs-breadcrumb-divider: '>';" aria-label="パンくずリスト">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">ホーム</a></li>
		<li class="breadcrumb-item active" aria-current="page">ライブラリ</li>
	</ol>
</nav>

Sassを経由して変更する場合、文字列の周囲に引用符を生成するには、quote関数が必要。例えば、> を仕切りとして使用するには、次のように使用：

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

埋め込みSVGアイコンも使用できる。CSSカスタムプロパティを経由して適用するか、Sass変数を使用。

見本
設定例
HTMLで設定<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="パンくずリスト">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">ホーム</a></li>
		<li class="breadcrumb-item active" aria-current="page">ライブラリ</li>
	</ol>
</nav>
Sassで設定$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

仕切りは、スタイルを --bs-breadcrumb-divider: ;（CSSカスタムプロパティの空の文字列は値としてカウントされる）に設定するか、Sass変数を $breadcrumb-divider: none; に設定して削除できる。

見本
設定例
HTMLで設定<nav style="--bs-breadcrumb-divider: '';" aria-label="パンくずリスト">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">ホーム</a></li>
		<li class="breadcrumb-item active" aria-current="page">ライブラリ</li>
	</ol>
</nav>
Sassで設定$breadcrumb-divider: none;
【変更履歴】
  • 【v5.0.0-alpha1】
    • SVGアイコンのBASE64へのエンコードが不要に
  • 【v5.0.0-beta1】
    • <nav> に [style="--bs-breadcrumb-divider:"] を入れるか、scss/_variables.scss に $breadcrumb-divider（RTLの場合は $breadcrumb-divider-flipped）を設定して再コンパイルする

 

アクセシビリティ（Accessibility）

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

詳細については、WAI-ARIA Authoring Practices for the breadcrumb patternに記載。

 

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定
scss/_variables.scss 内 breadcrumb-variables の設定$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;