Breadcrumb
現在のページ位置を階層的に表示するナビゲーションコンポーネント。ユーザーがサイト構造を把握し、上位ページに戻る際に使用します。
Basic
jui-breadcrumb の最も基本的な使用例です。
Slotted
JSON データを使わずに、ライト DOM 上で直感的に HTML 要素（a や span）を配置してパンくずリストを構築するスロット方式の使用例です。
Custom Separator (Slotted)
スロット方式でも、separator プロパティを指定することでセパレータ文字をカスタマイズできます。
関連コンポーネント
- Tabs — タブ切り替えでコンテンツを整理するナビゲーションコンポーネント
- Sidebar — サイドナビゲーションを提供するコンポーネント
- Pagination — ページ間の移動を提供するナビゲーションコンポーネント
ブラウザ対応
このコンポーネントが使用しているブラウザ機能と対応状況です。
| 機能 | 用途 | Chrome | Firefox | Safari | ステータス |
|---|---|---|---|---|---|
::slotted() | スロット方式での子要素およびセパレータのスタイル制御 | 53+ | 63+ | 10+ | Baseline 2020 |
| Flexbox | アイテムの横並び配置 | 29+ | 22+ | 9+ | Baseline 2017 |
CSS 変数 (var()) | デザイントークンおよびカスタムセパレータ適用 | 49+ | 31+ | 9.1+ | Baseline 2017 |
💡 いずれの機能も主要ブラウザで広く対応済みです。
Baseline 情報
| 機能 | Baseline 達成 | Widely Available 予定 |
|---|---|---|
::slotted() | 2020年 | 2022年後半 ✅ |
| Flexbox | 2017年 | 2020年前半 ✅ |
| CSS 変数 | 2017年 | 2020年前半 ✅ |
アクセシビリティ
- WAI-ARIA:
- ルートの
nav要素にrole="navigation"およびaria-label="パンくずリスト"（またはnav-labelProp値）が付加されます。 - パンくずリスト自体は
olおよびli要素で階層的にマークアップされ、各項目の関係性がスクリーンリーダーに正しく伝わります。 - 現在アクティブな（最後の）項目は、
aria-current="page"などと同等に太字のプレーンテキストとして配置され、現在位置であることを明示します。
- ルートの
- キーボードナビゲーション:
- リンク項目（
href属性があるもの）はTabキーで順次フォーカスを移動できます。
- リンク項目（
CSS カスタムプロパティ
| プロパティ名 | 説明 | 既定値 |
|---|---|---|
--jui-breadcrumb-separator | スロット方式での各子要素の間に挟み込まれるセパレータ文字 | '/' |
プロパティ
コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
items | items | パンくず項目（JSON文字列 or 配列） | BreadcrumbItem[] | string | '[]' |
maxItems | max-items | 最大表示数（超過分は省略） | number | 0 |
navLabel | nav-label | ナビゲーションラベル（i18n対応） | string | 'パンくずリスト' |
separator | separator | セパレータ文字 | string | '/' |
シャドウパーツ
CSSから直接スタイリング可能な内部要素（Parts）の一覧です。
| Part | Description |
|---|---|
"current" | 現在ページ |
"item" | 各パンくず項目 |
"link" | リンク要素 |
"list" | ol 要素 |
"nav" | ルートの nav 要素 |
"separator" | セパレータ |
Built with StencilJS