はじめに 🌟

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 に隠さない
区切り記号は見た目の補助として使う

参考: