syncfusion-javascript-breadcrumb

パンくずリストの実装

Breadcrumb コンポーネントは、ウェブサイトの階層構造内で現在の位置を特定して強調表示するためのグラフィカルユーザーインターフェース要素です。ウェブサイトのリンク階層における現在の位置をユーザーに示すことで、ナビゲーションを使いやすくし、認知負荷を軽減します。

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

次のことが必要になったときは、すぐにこのスキルを使用してください。

• 階層型のナビゲーションパスを表示する
• 複数レベルの構造内で現在の位置を示す
• シングルページアプリケーションにパンくずリストを実装する
• 異なる表示モードでオーバーフロー項目を処理する
• パンくずリストの外観や動作をカスタマイズする
• パンくずリストの項目に対するユーザー操作に応答する
• パンくずリストの項目に動的なスタイルやテンプレートを適用する

機能の概要

Breadcrumb コンポーネントが提供する機能：

• 階層型ナビゲーションの表示 - ルートから現在の位置までのナビゲーションパスを表示します
• 複数のオーバーフローモード - Menu、Collapsed、Hidden、Scroll、Wrap、None
• 項目のカスタマイズ - テンプレート、アイコン、無効状態
• イベント処理 - クリックイベントとレンダリングコールバック
• RTL のサポート - 右から左への方向でレンダリングします
• 状態の保持 - コンポーネントの状態を任意で保持します
• URL ベースの生成 - URL からパンくずリストを自動生成します

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

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージのセットアップ
• Breadcrumb コンポーネントの基本的な初期化
• 項目配列の作成と設定
• コンポーネントの DOM への追加
• コードを含む最小限の実行可能な例
• CSS のインポートとテーマ設定

コンポーネントプロパティの概要

📄 参照: references/component-properties.md

• 基本プロパティのリファレンス（activeItem、cssClass、disabled、enableNavigation）
• ナビゲーション設定（enableActiveItemNavigation、enableNavigation）
• 状態管理（enablePersistence、enableRtl）
• URL ベースのパンくずリスト生成
• デフォルト値を含むプロパティの説明
• 設定パターンとベストプラクティス

項目の設定

📄 参照: references/items-configuration.md

• BreadcrumbItemModel インターフェースとプロパティ
• 項目のプロパティ（id、text、url、disabled、iconCss）
• パンくずリスト項目の作成と設定
• 項目の状態の管理（有効／無効）
• ナビゲーション項目へのアイコンの追加
• 項目の動的な更新と操作
• 項目のアクセシビリティに関する考慮事項

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

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

• 項目をカスタムレンダリングするための itemTemplate プロパティ
• カスタム区切り文字を設定する separatorTemplate
• テンプレート関数のパターンと例
• カスタムレンダリングの実装
• 区切り文字のカスタマイズ（デフォルトの「/」と代替文字）
• CSS クラスのカスタマイズ戦略

オーバーフローモードと動作

📄 参照: references/overflow-modes.md

• 6 つすべてのモードを含む BreadcrumbOverflowMode 列挙型
• Menu モード - オーバーフロー項目用のサブメニュー
• Collapsed モード - 非表示項目を含む折りたたみアイコン
• Hidden モード - 表示する項目の最大数を指定する方式
• Scroll モード - HTML スクロールバーを使用する方式
• Wrap モード - 複数行に折り返す方式
• None モード - 1 行で表示する方式
• 各モードでの maxItems の設定

イベントとイベント処理

📄 参照: references/events-handling.md

• itemClick イベント（BreadcrumbClickEventArgs）
• beforeItemRender イベント（BreadcrumbBeforeItemRenderEventArgs）
• コンポーネントの初期化時に発生する created イベント
• イベントハンドラーのパターンと設定
• イベント引数とプロパティへのアクセス
• cancel プロパティを使ったイベントのキャンセル
• 一般的なイベントの使用例とパターン

メソッドとライフサイクル

📄 参照： references/methods-and-lifecycle.md

• コンポーネントのライフサイクルメソッド
• appendTo() - DOM 要素へのアタッチ
• destroy() - コンポーネントのクリーンアップ
• dataBind() - 即時データバインディング
• refresh() - コンポーネントの再レンダリング
• getRootElement() - ルート要素へのアクセス
• addEventListener/removeEventListener - 動的なイベント管理
• Inject() - モジュールの注入
• メソッドのベストプラクティスとタイミング

クイックスタートの例

// Create breadcrumb component
const breadcrumbObj = new Breadcrumb({
  items: [
    { text: 'Home', url: '/' },
    { text: 'Category', url: '/category' },
    { text: 'Product', url: '/product' }
  ],
  enableNavigation: true
});

// Append to DOM
breadcrumbObj.appendTo('#breadcrumb');

// Handle item click
breadcrumbObj.itemClick = (args) => {
  console.log('Clicked item:', args.item.text);
};

一般的なパターン

パターン 1：アイコン付きの基本的なナビゲーション

const breadcrumb = new Breadcrumb({
  items: [
    { text: 'Dashboard', url: '/', iconCss: 'e-icons e-home' },
    { text: 'Products', url: '/products', iconCss: 'e-icons e-package' },
    { text: 'Electronics', url: '/products/electronics' }
  ]
});

パターン 2：メニューモードでのオーバーフロー

const breadcrumb = new Breadcrumb({
  items: [...manyItems],
  maxItems: 4,
  overflowMode: 'Menu'
});

パターン 3：ナビゲーションのイベント処理

const breadcrumb = new Breadcrumb({
  items: [...items],
  itemClick: (args) => {
    // Prevent default navigation
    args.cancel = false;
    // Navigate to item URL
    window.location.href = args.item.url;
  }
});

パターン 4：項目の動的な更新

breadcrumb.items = newItemsList;
breadcrumb.dataBind();

主なプロパティ

プロパティ	型	デフォルト	用途
items	BreadcrumbItemModel[]	[]	表示するパンくずリスト項目の一覧
activeItem	string	''	アクティブなパンくずリスト項目の URL
overflowMode	string	'Menu'	maxItems を超えた項目の処理方法
maxItems	number	-1	オーバーフロー動作が適用されるまでの最大項目数
enableNavigation	boolean	true	項目のナビゲーションを許可するかどうか
disabled	boolean	false	パンくずリスト全体を無効にするかどうか
cssClass	string	''	スタイル設定用のカスタム CSS クラス
enableRtl	boolean	false	右から左への表示

一般的なユースケース

ユースケース 1：ウェブサイトのナビゲーション用パンくずリスト

• サイト階層内の現在のページの場所を表示する
• 親ページへのナビゲーションを可能にする
• アクティブな項目を強調表示する

ユースケース 2：E コマースのカテゴリナビゲーション

• 商品カテゴリのパスを表示する
• オーバーフローを使って深くネストされたカテゴリに対応する
• 親カテゴリへのクイックナビゲーションを可能にする

ユースケース 3：アプリケーションのワークスペースナビゲーション

• 現在のモジュール／機能のパスを表示する
• ナビゲーション履歴をパンくずリストとして表示する
• パスを動的に更新する

ユースケース 4：ファイルシステムブラウザー

• 現在のディレクトリパスを表示する
• フォルダー階層を移動する
• オーバーフローを使って大規模なフォルダー構造に対応する

---

次のステップ： 上記からリファレンスを選んで実装の詳細を確認するか、テストケースを実行してパンくずリストの実装を検証してください。