syncfusion-blazor-breadcrumb

Syncfusion Blazor Breadcrumb コンポーネント

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• ナビゲーション用のパンくずリストを構築し、シングルページアプリケーション（SPA）で階層内の現在位置を表示する
• 現在の URL パスに基づいてパンくずリストを自動生成する
• 項目を実行時に動的に管理（追加／削除）できるカスタムのナビゲーション順序を作成する
• パンくずリストの項目が多い場合のオーバーフローに対応する（折りたたみ、メニュー、折り返し、スクロールモード）
• アイコン、画像、区切り記号、テンプレートを使用して見た目をカスタマイズする
• Chip コンポーネントまたはカスタムレンダラーを使用してテンプレート化されたパンくずリストのレイアウトを実装する
• ビジネスロジックまたはユーザーロールに応じてナビゲーションを有効／無効にする

Syncfusion Blazor Breadcrumb コンポーネントは、URL の解析、レスポンシブなオーバーフロー処理、テンプレート機能を標準で備えており、階層型ナビゲーション UI を簡単に実装できます。

---

コンポーネントの概要

Blazor Breadcrumb コンポーネントは、アプリケーション内で訪問したページやセクションの階層を表示するナビゲーションコントロールです。

主な機能：

• 現在の URL パスから項目を自動生成
• BreadcrumbItem タグディレクティブを使用した項目の手動宣言
• 複数のオーバーフローモード（Collapsed、Menu、Wrap、Scroll、Hidden、None）
• IconCss プロパティによるアイコンと画像のサポート
• 項目と区切り記号のテンプレートベースのカスタマイズ
• 項目の動的な管理（実行時の追加／削除）
• URL ナビゲーション（相対 URL または絶対 URL）
• CSS によるカスタマイズが可能なレスポンシブデザイン

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストール（Syncfusion.Blazor.Navigations）
• 名前空間のインポートとサービスの登録
• テーマのスタイルシートとスクリプトの設定
• 基本的な <SfBreadcrumb> コンポーネントの初期化
• URL ベースのナビゲーションを使用した最初の描画

項目の設定

📄 参照： references/breadcrumb-items-configuration.md

• BreadcrumbItem のプロパティ（Text、Url、IconCss）
• <BreadcrumbItem> タグディレクティブを使用した項目の宣言
• 現在のページの URL から項目を自動生成
• Url プロパティを使用して絶対 URL から項目を生成
• Items プロパティを使用して項目を実行時に動的に追加／削除

アイコンと視覚要素

📄 参照： references/icons-and-visual-elements.md

• e-icons CSS クラスによるフォントアイコンの追加
• IconCss プロパティとカスタム CSS クラスによる画像のカスタマイズ
• パンくずリストの項目で SVG 画像をサポート
• アイコンのみのパンくずリスト項目（テキストなし）
• アイコンの選択的な表示（例：最初の項目のみ）

ナビゲーションとルーティング

📄 参照： references/navigation-and-routing.md

• パンくずリストの項目での相対 URL ナビゲーション
• 外部リンクへの絶対 URL ナビゲーション
• EnableNavigation="false" によるナビゲーションの無効化
• EnableActiveItemNavigation="true" によるアクティブな項目（最後の項目）のナビゲーションの有効化

オーバーフローモード

📄 参照： references/overflow-modes.md

• MaxItems プロパティによる表示項目数の制限
• Collapsed モード：中央の項目を隠し、最初と最後の項目を展開ボタンとともに表示
• Menu モード：残りの項目をドロップダウンサブメニューに表示
• Wrap モード：項目を複数行に折り返し
• Scroll モード：オーバーフロー時に水平スクロールバーを表示
• Hidden モード：親項目をクリックすると非表示の項目を表示
• None モード：すべての項目を1行に表示

テンプレートとカスタマイズ

📄 参照： references/templates-and-customization.md

• カスタムアイテム UI のレンダリングに使用する ItemTemplate
• アイテム区切り線のカスタマイズに使用する SeparatorTemplate
• 現在のアイテムデータにアクセスするためのテンプレートの context パラメーター
• ItemTemplate との Chip コンポーネントの統合
• 子コンテンツを使用した特定のアイテムのカスタマイズ

スタイルと外観

📄 参照： references/styling-and-appearance.md

• カスタマイズ用の CSS クラス（.e-breadcrumb-item、.e-breadcrumb-text、.e-breadcrumb-icon、.e-breadcrumb-separator）
• カスタムテーマ向けの Theme Studio との統合
• CSS による Breadcrumb のデフォルトスタイルの上書き
• 背景、テキストの色、アイコンの色、区切り線の色のカスタマイズ

---

クイックスタートの例

アイテムを明示的に指定した基本的なパンくずリスト：

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home" Url="https://example.com/home"></BreadcrumbItem>
        <BreadcrumbItem Text="Products" Url="https://example.com/products"></BreadcrumbItem>
        <BreadcrumbItem Text="Electronics" Url="https://example.com/products/electronics"></BreadcrumbItem>
        <BreadcrumbItem Text="Laptops"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

現在の URL から自動生成されるパンくずリスト：

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb></SfBreadcrumb>

---

よく使われるパターン

パターン 1：アイコンとテキストのアイテム

アイコンとテキストを組み合わせて、視覚的な階層を示し、すばやく内容を確認できるようにします。

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home" Url="/"></BreadcrumbItem>
        <BreadcrumbItem IconCss="e-icons e-folder-open" Text="Documents" Url="/docs"></BreadcrumbItem>
        <BreadcrumbItem Text="Projects"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

パターン 2：長いパンくずリストの処理

MaxItems と OverflowMode を使って、深い階層を管理します。

<SfBreadcrumb MaxItems="4" OverflowMode="BreadcrumbOverflowMode.Menu">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="/"></BreadcrumbItem>
        <BreadcrumbItem Text="Category 1" Url="/cat1"></BreadcrumbItem>
        <BreadcrumbItem Text="Category 2" Url="/cat1/cat2"></BreadcrumbItem>
        <BreadcrumbItem Text="Category 3" Url="/cat1/cat2/cat3"></BreadcrumbItem>
        <BreadcrumbItem Text="Current Page"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

パターン 3：アイテムの動的な管理

ユーザー操作に応じて、実行時にアイテムを追加または削除します。

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb Items="@breadcrumbItems"></SfBreadcrumb>

<button @onclick="AddItem">Add Item</button>
<button @onclick="RemoveItem">Remove Item</button>

@code {
    List<BreadcrumbItem> breadcrumbItems = new List<BreadcrumbItem>
    {
        new BreadcrumbItem { IconCss = "e-icons e-home" },
        new BreadcrumbItem { Text = "Products" }
    };

    private void AddItem()
    {
        breadcrumbItems.Add(new BreadcrumbItem { Text = "New Item" });
    }

    private void RemoveItem()
    {
        if (breadcrumbItems.Count > 0)
            breadcrumbItems.RemoveAt(breadcrumbItems.Count - 1);
    }
}

パターン 4：テンプレートを使ったカスタム区切り線

SeparatorTemplate を使って、区切り線の外観をカスタマイズします。

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="/"></BreadcrumbItem>
        <BreadcrumbItem Text="Products" Url="/products"></BreadcrumbItem>
        <BreadcrumbItem Text="Details"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <SeparatorTemplate>
            <span class="e-icons e-arrow"></span>
        </SeparatorTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

---

主要なプロパティ

プロパティ	型	デフォルト	用途
Items	List<BreadcrumbItem>	null	表示するパンくずリストアイテムのコレクション
Url	string	null	指定した URL パスからアイテムを生成
MaxItems	int?	null	オーバーフロー処理を行うまでに表示するアイテムの最大数
OverflowMode	BreadcrumbOverflowMode	Default	MaxItems を超えるアイテムの処理方法
EnableNavigation	bool	true	アイテムのクリック時に URL ナビゲーションを有効化／無効化
EnableActiveItemNavigation	bool	false	最後の（アクティブな）アイテムのナビゲーションを有効化
ActiveItem	string	null	アクティブな（現在選択されている）アイテムを設定
Class	string	null	スタイル設定用のカスタム CSS クラス

---

よくあるユースケース

1. E コマースの商品パンくずリスト： カテゴリーを通るナビゲーションパスを表示します（ホーム > エレクトロニクス > ノート PC > ゲーミングノート PC）
2. 管理ダッシュボードのナビゲーション： 多階層メニューにおけるユーザーの位置を表示します
3. ファイルエクスプローラー： アイコンを使ってフォルダーのナビゲーションパスを視覚化します
4. ドキュメントサイト： セクションの階層を表示します（ドキュメント > ガイド > はじめに）
5. 検索結果のフィルター： 有効なフィルターのパスを表示します（検索 > 結果 > 価格で絞り込み）
6. ステップ形式のワークフロー： 複数のステップからなるプロセスで現在のステップを示します（ステップ 1 > ステップ 2 > 現在）

---

次のステップ： 上記の「ドキュメントとナビゲーションガイド」セクションから、ユースケースに応じたリファレンスファイルを参照してください。