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

実例（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='%236c757d'/%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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

仕切りは、スタイルを --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" をセットの最後の項目に適用して下さい。

詳細については、ARIA Authoring Practices Guide breadcrumb patternに記載。

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数（Variables）v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、パンくずリストは、リアルタイムのカスタマイズを強化するために、.breadcrumb でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_breadcrumb.scss 内 breadcrumb-css-vars の設定--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

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:          var(--#{$prefix}secondary-color);
$breadcrumb-active-color:           var(--#{$prefix}secondary-color);
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;