はじめに 🌟
Breadcrumb は、現在のページがサイトやアプリのどの階層にあるのかを示すナビゲーションです。単なるリンク列ではなく、「いまどこにいるか」を読者に伝えるための情報設計そのものだと考えると、扱い方がかなり変わります。
Fluent UI 2 でも Breadcrumb は重要な部品です。ただし、見た目をそろえるだけでは足りません。階層が伝わること、文言が短くて分かりやすいこと、支援技術に正しく伝わることがそろって初めて、使いやすい Breadcrumb になります。
本記事では、まず Fluent UI 2 の Breadcrumb を整理し、そのあとに Fluent UI Blazor 5 でどう扱うか、つまり「削除されたうえでどう自作するか」、レイアウト、コンテンツの書き方、アクセシビリティの要点をまとめます。
関連して、Fluent UI 2 全体のアクセシビリティを整理した記事もあります。あわせて読むと、Breadcrumb を置く意味がさらに見えやすくなります。
Fluent UI 2 で始めるアクセシビリティ実装 — キーボード操作・支援技術・WCAG 2.1 の実践ガイド
Fluent UI 2 とは
Fluent UI 2 は、Microsoft の Fluent Design System に沿った UI コンポーネント群と設計指針です。見た目の統一だけでなく、操作の一貫性やアクセシビリティまで含めて考えるのが前提です。
Breadcrumb は、その中でも「階層をたどる」ための部品です。WAI-ARIA の Breadcrumb Pattern では、Breadcrumb trail は 親ページへのリンクの列であり、通常はページ本文の前に水平に置かれます。
WAI-ARIA Breadcrumb Pattern
つまり Breadcrumb は、ページ移動のための近道というより、情報の位置関係を示す案内板に近い役割です。
Fluent UI Blazor 5 ではどうなるか
ここが少し重要です。Fluent UI Blazor の v5 では、FluentBreadcrumb と FluentBreadcrumbItem は 削除されています。
MCP サーバーの migration guide でも、direct replacement はないと案内されています。代わりに、FluentStack と FluentLink、必要なら FluentIcon を組み合わせて自作します。
Fluent UI Blazor v5 migration guide
| 観点 | Fluent UI 2 | Fluent UI Blazor 5 |
|---|---|---|
| 実体 |
Breadcrumb / fluent-breadcrumb 系 |
直接の代替コンポーネントなし |
| 方針 | そのまま使う |
FluentStack + FluentLink で組む |
| 現在地 |
aria-current="page" を付ける |
最終項目をテキスト化し、現在地として明示する |
| 区切り | コンポーネント側で扱う |
FluentIcon などで明示的に置く |
つまり、Blazor 側で大事なのは「同名コンポーネントを探すこと」ではなく、Breadcrumb の意味を自前で再構成することです。
Blazor の基本形
@using Microsoft.FluentUI.AspNetCore.Components
@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons
<nav aria-label="Breadcrumb">
<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="4px">
<FluentLink Href="/">Home</FluentLink>
<span aria-hidden="true">
<FluentIcon Value="@(new Icons.Regular.Size12.ChevronRight())" Focusable="false" />
</span>
<FluentLink Href="/products">Products</FluentLink>
<span aria-hidden="true">
<FluentIcon Value="@(new Icons.Regular.Size12.ChevronRight())" Focusable="false" />
</span>
<span aria-current="page">Current page</span>
</FluentStack>
</nav>
この形なら、nav ランドマーク、リンク、現在地、区切りの役割を分けて書けます。区切りアイコンは aria-hidden にして、支援技術に余計な情報を渡さないようにします。
Breadcrumb の役割
Breadcrumb は、次のようなときに向いています。
- 画面階層が 2〜4 段くらいあり、上位ページへ戻れると便利なとき
- 現在地が複数のカテゴリにまたがらず、階層として表現できるとき
- 利用者が「ひとつ上」「ふたつ上」に戻ることが多いとき
逆に、単なる「戻る」操作なら Breadcrumb より戻るボタンのほうが自然です。Breadcrumb は階層表示であって、履歴ナビゲーションではありません。
レイアウトの考え方
WAI-ARIA の Pattern にあるとおり、Breadcrumb は通常、ページ本文の前に水平に置きます。重要なのは、装飾ではなく 現在地の手がかりとして見えることです。
レイアウトで意識したいのは次の 3 点です。
| 観点 | 書き方 |
|---|---|
| 位置 | 本文の前、または見出しの直上に置く |
| 順序 | 上位階層 → 下位階層 → 現在地 の順にする |
| 視認性 | 区切り記号は見やすく、意味を邪魔しないものにする |
Fluent UI Blazor v5 では、Breadcrumb 用のスロット付きコンポーネントがないため、区切りや補助アイコンは自分で並べます。
ただし、区切り記号は意味ではなく見た目の補助です。区切り記号だけで階層を伝えようとしないほうが安全です。
@using Microsoft.FluentUI.AspNetCore.Components
@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons
<nav aria-label="Breadcrumb">
<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="4px">
<FluentLink Href="/">Home</FluentLink>
<span aria-hidden="true">
<FluentIcon Value="@(new Icons.Regular.Size12.ChevronRight())" Focusable="false" />
</span>
<FluentLink Href="/products">Products</FluentLink>
<span aria-hidden="true">
<FluentIcon Value="@(new Icons.Regular.Size12.ChevronRight())" Focusable="false" />
</span>
<FluentText>Widgets</FluentText>
</FluentStack>
</nav>
コンテンツの書き方 ✍️
Breadcrumb の文言は、短い名詞句で書くのが基本です。操作文ではなく、ページやカテゴリの名前に寄せます。
| よい文言 | 避けたい文言 | 理由 |
|---|---|---|
| Home / Products / Widgets | Go / Open / Next | 操作ではなく階層名を出したい |
| Billing / Invoices / Detail | Settings / More / Item | 何の階層か分からない |
| Project A / Releases / v1.2.0 | Back / Previous / Current | 現在地の意味が曖昧になる |
文言で特に大事なのは、最後の項目が現在地として自然に読めることです。
たとえば Widgets より Widgets detail、Invoice #1024 より Invoice 1024 のほうが、画面読み上げでも意味が通りやすいことがあります。
Breadcrumb は「どこにいるか」を示す部品なので、見出しの代わりにしないほうがよいです。ページタイトルは別に置き、Breadcrumb はあくまで補助にします。
アクセシビリティ ♿
Breadcrumb で一番大事なのは、見た目よりも ランドマーク・現在地・文言 です。
WAI-ARIA Pattern では、Breadcrumb trail は nav ランドマーク内に置き、aria-label または aria-labelledby で名前を付けます。現在ページへのリンクには aria-current="page" を使います。
WAI-ARIA Breadcrumb Pattern
実務では、次の点を確認すると外しにくいです。
-
nav aria-label="Breadcrumb"のように、Breadcrumb だと分かるランドマーク名を付ける - 現在地を示す項目は 1 つだけにする
- 現在地の文言は、画面上の見た目と読み上げ内容が一致するようにする
- アイコンだけで意味を伝えない
- 省略記号や装飾が入っても、テキストだけで階層が追えるようにする
自動チェックで分かるのは、主に nav や aria-current の有無です。文言が本当に分かりやすいか、階層として自然か は、人が読んで確かめる必要があります。
WAI-ARIA Pattern では Keyboard Interaction は特別扱いされていません。つまり、通常のリンクとして自然に Tab 移動できることが基本で、独自のキーボード操作を増やす必要はありません。
Fluent UI Blazor での書き方のポイント
v5 では Breadcrumb 専用のコンポーネントを探すより、次の考え方で組むほうが自然です。
- 上位階層はリンクにする
- 現在地はリンクにしない
-
navでランドマークを付ける - 区切り記号は
aria-hiddenにして装飾として扱う - 文言は短く、階層名として読めるようにする
@using Microsoft.FluentUI.AspNetCore.Components
@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons
<nav aria-label="Breadcrumb">
<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="4px">
<FluentLink Href="/">Home</FluentLink>
<span aria-hidden="true">
<FluentIcon Value="@(new Icons.Regular.Size12.ChevronRight())" Focusable="false" />
</span>
<FluentLink Href="/projects">Projects</FluentLink>
<span aria-hidden="true">
<FluentIcon Value="@(new Icons.Regular.Size12.ChevronRight())" Focusable="false" />
</span>
<FluentLink Href="/projects/alpha">Project Alpha</FluentLink>
<span aria-hidden="true">
<FluentIcon Value="@(new Icons.Regular.Size12.ChevronRight())" Focusable="false" />
</span>
<span aria-current="page">Release notes</span>
</FluentStack>
</nav>
この書き方なら、利用者は現在地をひと目で把握でき、上位階層にも戻りやすくなります。現在地を aria-current="page" にすることで、支援技術にも明示できます。
まとめ 📝
Fluent UI 2 の Breadcrumb は、単なるリンク列ではなく、階層と現在地を伝えるための情報設計です。
Fluent UI Blazor 5 では Breadcrumb 専用コンポーネントはなく、意味を保ったまま自作するのが前提です。実務では次の原則を押さえると安定します。
- 現在地を 1 つだけ示す
-
navとaria-labelを付ける - 文言は短い名詞句にする
- 必須情報を Breadcrumb に隠さない
- 区切り記号は見た目の補助として使う
参考: