ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Breadcrumbs | リンクとセパレーターで構成されたパンくずリスト | — | |
| 2 | Breadcrumb Item | リンクを表すラベル付きの要素 | Link | — |
| 3 | Separator | Breadcrumb Itemの末尾に付与される要素同士を区切るための要素 | — |
Options: 選択肢
isCurrent
True
現在のページを表す状態です。
インタラクションはなく、セパレーターは非表示になります。パンくずリストの一番最後に使用します。
False (default)
Breadcrumb Itemのデフォルトの状態です。
各階層へのリンクが設定され、セパレーターが表示されます。
States: 状態
isCurrent: Falseの場合は、Linkコンポーネントに準じた状態を持ちます。詳細はLink をご覧ください。
Metrics: 寸法
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 28px
Behaviors: 振る舞い
現在のページのアイテム
現在のページのアイテムは、isCurrent: trueのオプションをセットし、非インタラクティブなアイテムとして表示されます。
Usage: 使い方
Do
コンテンツ内部のセカンダーリナビゲーションとして使用してください。
Don’t
プライマリーナビゲーションとして使用しないでください。
Do
パンくずリストは、プライマリーナビゲーションの後、メインページコンテンツの前に水平に配置してください。
Don’t
複数行に折り返して使用しないでください。
Don’t
パンくずリストには、外部リンクを含めないでください。
Don’t
最後のパンくずリストアイテム（現在のページ）はリンクにしないでください。
Don’t
複数ステップのプロセスに、パンくずリストを使用しないでください。
Contents: 内容
Do
ナビゲーションのテキストは、簡潔で、リンク先のコンテンツが明確にわかるものにしてください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2024/11/29 | ドキュメントを公開 |
小さな気づきや違和感があれば、
フィードバック