メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

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

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

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
このページの項目 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>
【設定】
  • <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='%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;
【変更履歴】
  • 【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" をセットの最後の項目に適用して下さい。

詳細については、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:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;