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

実例（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>

 

仕切り（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;

 

アクセシビリティ（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;