このコンポーネントについて

役割と種類

Breadcrumbは日本語で「パンくず」と呼ばれるコンポーネントです。ナビゲーションの一つで、サイトの全体構造と現在位置の関係を、ホームを起点とした階層表現によって示します。ユーザーはBreadcrumbにて現在アクセスしているページの位置の把握や効率的な上位階層への移動ができます。

Breadcrumbは、Bottom NavigationやSide Navigationなど、他のNavigationコンポーネントを補完することを目的としています。Breadcrumbは、主要なNavigationを強化しますが、完全に置き換えることはできません。

Breadcrumbは、ホームを起点とした階層表現であるため、ホームのリンクを先頭に設ける必要があります。

構成

Breadcrumbは、Itemと、各Itemを区切るSeparatorで構成されています。

いつ使うべきか / 使わないべきか

Breadcrumbは、階層的に配置されたページを持つ大規模なWebサイト・Webアプリケーションで効果的です。特に、外部ソースからアクセスされる可能性が高いページでは、Breadcrumbの使用を推奨します。

位置を示す必要がない場合

ルート（ホーム）ディレクトリでは現在地を示す必要がないためBreadcrumbを使用しない選択肢も検討できます。また、階層構造全体の中における現在地を示す必要性が低い（ランディングページなど）場合においてもBreadcrumbを使用しない選択肢を検討できます。

ネイティブアプリケーションの場合

ネイティブアプリケーションでは、プラットフォームの原則的に通常Breadcrumbが使用されない場面では無理に使用せず、プラットフォームの原則に則ったナビゲーション表現にしましょう。

インタラクション

対象ページへの遷移

BreadcrumbのItemに対するクリックイベントで、そのItemが指すページへの遷移を行います。

マークアップ

BreadcrumbのItemには、リンク（a要素）とテキスト（span要素）の2種類があります。

リンク

末尾のItemを除くすべてのItemは、遷移可能なa要素を使用します。

テキスト

末尾のItemは、現在位置を指すItemであるため、a要素ではなくspan要素を使用します。

スタイル

Size

	Modifier class
S	.-size-s
M*	.-size-m
L	.-size-l

Density

	Modifier class
Dense	.-density-dense
Normal*	.-density-normal
Comfort	.-density-comfort

Overflow

内容するItemの文字が多く、幅が長い場合を考慮したオプションです。

	Modifier class
Wrap*	.-overflow-wrap
Scroll	.-overflow-scroll

アクセシビリティ確保の観点で、基本的にはWrap（親要素の幅で折り返される）をデフォルトとして推奨します。

Scroll（親要素の幅の中で横スクロール可能にする）のオプションを使用する場合は、

• そもそもアイテム名（ページ名・パス名）が長くなり過ぎていないか、ディレクトリ階層が深過ぎないか、など検討の上で調整する
• メインコンテンツ上部ではヒーローエリア・メインビジュアルとのレイアウトの兼ね合いなどによりやむなくScrollオプションを使用しつつも、メインコンテンツ下部にもWrapオプションのBreadcrumbを配置する

といった対応を踏まえ、アクセシビリティが損なわれないようにしてください。