実例(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("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");" 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に記載。