syncfusion-aspnetcore-breadcrumb

ASP.NET Core でのパンくずナビゲーションの実装

Breadcrumb コンポーネントは、アプリケーション内での現在位置をユーザーが把握しやすくする階層型のナビゲーションパスを表示します。親ページへの移動ができるほか、柔軟なデータバインディング、テンプレート、アイコン、オーバーフロー処理に対応しています。

このスキルを使用するタイミング

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

• ASP.NET Core アプリケーションに階層型のパンくずナビゲーションを表示する
• コレクションからパンくず項目をバインドする、または現在の URL から生成する
• テンプレート、アイコン、CSS クラスを使用してパンくずの外観をカスタマイズする
• パンくず項目のクリックイベントやレンダリングイベントを処理する
• 長いパンくずリストのオーバーフロー動作を実装する
• RTL レンダリングに対応する、または特定の項目を無効にする

コンポーネントの概要

Breadcrumb コンポーネントは、次の機能を持つナビゲーション UI 要素です。

• 階層構造における現在のページの位置を表示する
• ユーザーが上位階層のページに移動できるようにする
• オプションのアイコン、テンプレート、区切り記号を使って項目をレンダリングする
• 複数のオーバーフローモード（Collapsed、Hidden、Menu、Wrap、Scroll、None）に対応する
• 項目のレンダリング時やクリック時にイベントを発生させる
• ASP.NET Core TagHelper 構文で動作する

主なプロパティ：

• items - 表示する BreadcrumbItem オブジェクトの配列
• url - URL パスから項目を自動生成する
• activeItem - 特定の項目を現在のアクティブ項目として指定する
• enableNavigation - 項目をナビゲーション可能にするかどうかを制御する
• overflowMode + maxItems - 長いパンくずリストを処理する
• itemTemplate + separatorTemplate - レンダリングをカスタマイズする

主なイベント：

• beforeItemRender - 各項目のレンダリング前に発生します（カスタマイズ用）
• itemClick - パンくず項目がクリックされたときに発生します
• created - コンポーネントの初期化完了後に発生します

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

実装のニーズに合った参照ファイルを選択してください。

はじめに

📄 参照： references/getting-started.md

• Syncfusion.EJ2.AspNet.Core パッケージのセットアップ
• TagHelper の登録とリソースの追加
• 最初のパンくずコントロールの作成
• 項目コレクションのバインド
• 項目のナビゲーションの制御

データバインディングと項目

📄 参照： references/data-binding.md

• e-breadcrumb-items タグディレクティブを使用した項目のバインド
• 現在のページ URL から項目を生成する
• 静的 URL から項目を生成する
• 生成された項目をカスタマイズするための beforeItemRender の使用
• 動的な項目バインディングのパターン

ナビゲーションと URL

📄 参照： references/navigation.md

• 相対 URL と絶対 URL の定義
• アクティブな（最後の）項目のナビゲーションを有効にする
• ナビゲーションを実行する項目を制御する
• URL の操作に beforeItemRender を使用する
• itemClick でナビゲーションイベントを処理する

アイコンと視覚要素

📄 参照： references/icons.md

• iconCss プロパティを使用したフォントアイコンの追加
• アイコンとしての画像ファイルの使用
• SVG アイコンの表示
• アイコンの配置（左または右）
• アイコンと項目テキストの組み合わせ

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

📄 参照： references/templates.md

• itemTemplate による項目の外観のカスタマイズ
• separatorTemplate による区切り記号のカスタマイズ
• テンプレート内での条件分岐の使用
• テンプレート内への他のコンポーネント（チップなど）の組み込み
• テンプレートのイベントバインディングパターン

オーバーフローとレスポンシブ表示

📄 参照： references/overflow-modes.md

• オーバーフローモードと maxItems の理解
• Collapsed モード（最初と最後の項目のみを表示）
• Hidden モード（段階的に表示）
• Menu モード（サブメニューでオーバーフローを表示）
• Wrap モード（複数行で表示）
• Scroll モード（HTML スクロールバーを表示）
• None モード（切り詰めなしで1行に表示）

高度なカスタマイズ

📄 参照： references/customization.md

• コンポーネントへの CSS クラスの適用
• RTL（右から左）でのレンダリング
• 項目とコンポーネントの無効化
• パンくずリストの状態の保持
• 高度なカスタマイズのための beforeItemRender の使用

API リファレンス全体

📄 参照： references/api-reference.md

• すべてのプロパティ、メソッド、イベント
• イベント引数の構造
• オーバーフローモードの列挙型
• あまり取り上げられていない API の例

クイックスタートの例

最小限のパンくずリストの実装例です。

@addTagHelper *, Syncfusion.EJ2


<ejs-breadcrumb>
    <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="~/"></e-breadcrumb-item>
        <e-breadcrumb-item text="Products" url="~/products"></e-breadcrumb-item>
        <e-breadcrumb-item text="Electronics" url="~/products/electronics"></e-breadcrumb-item>
        <e-breadcrumb-item text="Laptops"></e-breadcrumb-item>
    </e-breadcrumb-items>
</ejs-breadcrumb>

このコードの動作：

• 4 つのパンくずリスト項目をレンダリングします
• 最初の 3 つの項目はナビゲーション可能です（URL を持ちます）
• 最後の項目（Laptops）は現在のページであり、ナビゲーションできません
• パンくずリストは Home > Products > Electronics > Laptops と表示されます

よくあるパターン

パターン 1：URL に基づく生成

ページの URL から項目を自動生成するようにパンくずリストを設定します。

<ejs-breadcrumb url="https://example.com/products/electronics/laptops">
</ejs-breadcrumb>

使用する場面： URL 構造に従うパンくずリストを自動生成したい場合。

パターン 2：ナビゲーションの制御

ナビゲーションを完全に無効にするか、アクティブな項目のみ無効にします。

<ejs-breadcrumb enableNavigation="false">
    
</ejs-breadcrumb>

<ejs-breadcrumb enableActiveItemNavigation="true">
    
</ejs-breadcrumb>

パターン 3：オーバーフローの処理

パンくずリストが長い場合は、オーバーフローモードを使用します。

<ejs-breadcrumb overflowMode="Collapsed" maxItems="3">
    
</ejs-breadcrumb>

パターン 4：項目クリックの処理

itemClick イベントを使用して、項目のクリックに応答します。

<ejs-breadcrumb itemClick="OnBreadcrumbItemClick">
    <e-breadcrumb-items>
        <e-breadcrumb-item text="Home" url="~/"></e-breadcrumb-item>
        <e-breadcrumb-item text="Dashboard" url="~/dashboard"></e-breadcrumb-item>
    </e-breadcrumb-items>
</ejs-breadcrumb>

C# のハンドラーでは、次のようにします。

public void OnBreadcrumbItemClick(BreadcrumbClickEventArgs args)
{
    // Handle item click
    var clickedItem = args.Item;
}

主なプロパティの概要

プロパティ	型	用途
items	BreadcrumbItemModel[]	表示するパンくずリスト項目のコレクション
url	string	URL パスから項目を自動生成します
activeItem	string	現在アクティブな項目の URL／識別子
enableNavigation	boolean	項目のナビゲーションを許可／禁止します（デフォルト：true）
enableActiveItemNavigation	boolean	最後の項目をナビゲーション可能にします（デフォルト：false）
maxItems	number	オーバーフロー動作を開始するしきい値
overflowMode	string	maxItems を超える項目の表示方法（Collapsed、Hidden、Menu、Wrap、Scroll、None）
itemTemplate	string | Function	項目のレンダリングに使用するカスタムテンプレート
separatorTemplate	string | Function	区切り文字に使用するカスタムテンプレート
enableRtl	boolean	右から左にレンダリングします（デフォルト：false）
disabled	boolean	コンポーネント全体を無効にします（デフォルト：false）
cssClass	string	コンポーネントに CSS クラスを適用します
enablePersistence	boolean	ページの再読み込み後もコンポーネントの状態を保持します

よくあるユースケース

ユースケース 1：E コマースのパンくずリスト 商品カテゴリーを移動します：Home > Electronics > Laptops > Gaming Laptops

ユースケース 2：ファイルブラウザー ファイルパスを表示します：Root > Documents > Projects > MyProject

ユースケース 3：複数ステップのフォーム フォームの進行状況を示します：Step 1 > Step 2 > Step 3 (Current)

ユースケース 4：ドキュメントサイト ドキュメントの階層を移動します：Docs > API > Components > Breadcrumb

ユースケース 5：管理ダッシュボード ユーザーのパスを表示します：Dashboard > Users > Admin > Edit Profile

---

次のステップ

1. 開始する： インストールと基本設定については、Getting Started を参照してください
2. データをバインドする： Data Binding を使用してパンくずリストの項目を接続します
3. カスタマイズする： Templates と Icons を確認して、表示をカスタマイズします
4. 最適化する： Overflow Modes を使用して、長いパンくずリストに対応します
5. 参照する： API の詳細については、API Reference を確認してください

実装パターン、イベント処理、高度なシナリオの詳細については、対応するリファレンスファイルを参照してください。