syncfusion-react-breadcrumb

Syncfusion React Breadcrumb コンポーネントのスキル

目次

1. このスキルを使用するタイミング
2. コンポーネントの概要
3. ドキュメントとナビゲーションガイド
4. クイックスタートの例
5. 一般的なパターン
6. 主要なプロパティのリファレンス
7. 一般的なユースケース

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

以下が必要な場合に、このスキルを使用してください。

• 階層構造内の現在の位置を示すパンくずナビゲーションを作成する
• アプリケーション内の異なるページやセクション間のナビゲーションを有効にする
• さまざまな方法（Menu、Scroll、Collapsed など）でパンくず項目のオーバーフローを処理する
• アイコン、テンプレート、区切り文字を使ってパンくずの外観をカスタマイズする
• キーボード操作に対応したアクセシブルなパンくずナビゲーションを実装する
• URL またはデータからパンくず項目を動的にバインドする
• シングルページアプリケーションでパンくずをルーティングライブラリと統合する
• パンくず全体または個々の項目を条件に応じて無効にする
• パンくずのイベントを処理し、カスタムロジックを実行する
• 国際化のために RTL サポートを適用する

コンポーネントの概要

Syncfusion React Breadcrumb コンポーネントは、アプリケーション内にナビゲーションパスやパンくずリストを柔軟に表示する方法を提供します。主な機能は次のとおりです。

• ナビゲーションのサポート：コンポーネント単位および項目単位で細かく制御し、ナビゲーションを有効または無効にできます
• コンポーネントの制御：コンポーネント全体の有効化／無効化、アクティブ項目の設定、カスタム CSS クラスの適用ができます
• 項目単位の制御：個々の項目の無効化、アイコンの適用、識別用 ID の設定ができます
• 柔軟なデータバインディング：宣言的に項目をバインドするか、URL から動的に生成できます
• オーバーフローモード：6 つのモード（Menu、Collapsed、Scroll、Wrap、Hidden、None）でコンテンツのオーバーフローを処理できます
• カスタマイズ：項目テンプレートと区切り文字テンプレートを使用して、豊かでカスタムなレイアウトを作成できます
• イベント処理：包括的な引数を持つ 4 つのイベント（beforeItemRender、itemClick、created）をサポートします
• 国際化：右から左に記述する言語に完全対応した RTL サポートを提供します
• アクセシビリティ：キーボードナビゲーションとスクリーンリーダーをサポートし、WCAG 2.2 に完全準拠しています
• アイコンの統合：フォントアイコン、画像、SVG グラフィックをサポートします
• 状態管理：プログラムによるアクティブ項目の設定と、項目の有効／無効状態の管理ができます

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

API プロパティとイベントのリファレンス

📄 参照： references/api-properties-and-events.md

コード例を含む完全な API リファレンスです。

• すべての BreadcrumbComponent プロパティ（activeItem、cssClass、disabled、enableNavigation など）
• すべての BreadcrumbItem プロパティ（disabled、iconCss、id、text、url）
• すべてのコンポーネントイベント（beforeItemRender、itemClick、created）
• イベントの引数と使用例
• 6 つのオーバーフローモードすべての例
• プロパティとイベントの概要表

はじめに

📄 参照： references/getting-started.md

Syncfusion Breadcrumb を初めて使用する場合は、ここから始めてください。

• インストールと依存関係のセットアップ
• Vite と Create React App の環境設定
• CSS スタイルシートとテーマの追加
• 最初の基本的なパンくずコンポーネントの作成
• パンくずへの項目の追加
• TypeScript の設定と型

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

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

ナビゲーションを有効にする必要がある場合に使用してください。

• 項目のナビゲーションを有効または無効にする（enableNavigation プロパティ）
• 相対 URL と絶対 URL を実装する
• アクティブ項目（最後のパンくず）のナビゲーションを有効にする（enableActiveItemNavigation）
• beforeItemRender を使って URL を新しいタブで開く
• itemClick イベントを処理する
• React Router を使った高度なルーティング統合

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

📄 参照: references/customization.md

パンくずリストの外観をカスタマイズする場合に使用します。

• オーバーフローモード（Menu、Collapsed、Scroll、Wrap、Hidden、None）
• リッチコンテンツ用の項目テンプレート（itemTemplate プロパティ）
• カスタムアイコンを使用した区切り文字テンプレート（separatorTemplate）
• 表示する項目の最大数の管理（maxItems プロパティ）
• 項目単位での無効化（disabled プロパティ）
• スタイル設定と CSS クラス（cssClass プロパティ）

アイコンの統合とデータバインディング

📄 参照: references/icon-integration-data-binding.md

アイコンや動的データを扱う場合に使用します。

• フォントアイコンの実装（iconCss を使用した Syncfusion アイコン）
• 画像や SVG グラフィックをアイコンとして追加
• アイコンの配置（左、右、アイコンのみ）
• タグディレクティブからのデータバインディング
• URL に基づく項目の生成（コンポーネントの url プロパティ）
• 静的 URL の設定
• beforeItemRender を使用した生成項目のテキストのカスタマイズ

アクセシビリティ

📄 参照: references/accessibility.md

アクセシブルなパンくずリストを実装する場合に使用します。

• WCAG 2.2 準拠ガイドライン
• ARIA 属性とロール
• キーボードナビゲーションのサポート（Tab、Shift+Tab、Enter）
• スクリーンリーダー向けの最適化
• 右から左への（RTL）サポート（enableRtl プロパティ）
• アクセシビリティツールを使用したテスト

クイックスタートの例

開始するための最小限の動作例を紹介します。

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-navigations/styles/tailwind3.css';

export default function App() {
  return (
    <BreadcrumbComponent enableNavigation={false}>
      <BreadcrumbItemsDirective>
        <BreadcrumbItemDirective iconCss="e-icons e-home" url="/" />
        <BreadcrumbItemDirective text="Components" url="/components" />
        <BreadcrumbItemDirective text="Breadcrumb" url="/breadcrumb" />
      </BreadcrumbItemsDirective>
    </BreadcrumbComponent>
  );
}

一般的なパターン

パターン 1：ナビゲーションを有効にしたパンくずリスト

enableNavigation={true} を設定し、URL を指定してユーザーがナビゲーションできるようにします。

<BreadcrumbComponent enableNavigation={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="../" />
    <BreadcrumbItemDirective text="Products" url="../products" />
    <BreadcrumbItemDirective text="Category" url="../products/category" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

パターン 2：アイコン付きのパンくずリスト

アイコン付きのパンくずリストで視覚的な情報を追加します。

<BreadcrumbComponent enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective iconCss="e-icons e-home" />
    <BreadcrumbItemDirective iconCss="e-bicons e-folder" text="Folder" />
    <BreadcrumbItemDirective iconCss="e-bicons e-file" text="Document" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

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

レスポンシブなパンくずリストの表示には、オーバーフローモードを使用します。

<BreadcrumbComponent maxItems={3} overflowMode="Menu" enableNavigation={false}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" />
    <BreadcrumbItemDirective text="Folder 1" />
    <BreadcrumbItemDirective text="Folder 2" />
    <BreadcrumbItemDirective text="Folder 3" />
    <BreadcrumbItemDirective text="File" />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

パターン 4：コンポーネントレベルの制御

コンポーネント全体を無効にするか、アクティブな項目をプログラムで設定します。

import { useState } from 'react';

export default function App() {
  const [isDisabled, setIsDisabled] = useState(false);
  const [activeUrl, setActiveUrl] = useState('/products');

  return (
    <div>
      <BreadcrumbComponent 
        disabled={isDisabled}
        activeItem={activeUrl}
        enableNavigation={true}
      >
        <BreadcrumbItemsDirective>
          <BreadcrumbItemDirective text="Home" url="/" />
          <BreadcrumbItemDirective text="Products" url="/products" />
          <BreadcrumbItemDirective text="Electronics" url="/products/electronics" />
        </BreadcrumbItemsDirective>
      </BreadcrumbComponent>
    </div>
  );
}

パターン 5：項目単位での無効化

条件に基づいて特定の項目を無効にします。

<BreadcrumbComponent enableNavigation={true}>
  <BreadcrumbItemsDirective>
    <BreadcrumbItemDirective text="Home" url="/" disabled={false} />
    <BreadcrumbItemDirective text="Products" url="/products" disabled={false} />
    <BreadcrumbItemDirective text="Admin Only" url="/admin" disabled={!isAdmin} />
  </BreadcrumbItemsDirective>
</BreadcrumbComponent>

主なプロパティのリファレンス

コンポーネントレベルのプロパティ

プロパティ	型	デフォルト	目的
enableNavigation	boolean	true	項目のナビゲーションを有効／無効にします
enableActiveItemNavigation	boolean	false	最後の項目をクリック可能にします
disabled	boolean	false	コンポーネント全体を無効にします
activeItem	string	N/A	アクティブなパンくず項目の URL
cssClass	string	N/A	コンテナーに適用する CSS クラス
enableRtl	boolean	false	右から左への表示
maxItems	number	N/A	オーバーフローする前に表示する項目の最大数
overflowMode	string	'Menu'	オーバーフローの動作：Menu、Collapsed、Scroll、Wrap、Hidden、None
items	BreadcrumbItemModel[]	N/A	パンくず項目の配列
itemTemplate	Function|string	N/A	項目のカスタムテンプレート
separatorTemplate	Function|string	N/A	区切り文字のカスタムテンプレート
url	string	N/A	URL パスから項目を生成します

項目レベルのプロパティ

プロパティ	型	デフォルト	目的
text	string	''	表示テキスト
url	string	''	ナビゲーション URL
iconCss	string	null	アイコンの CSS クラス
disabled	boolean	false	個々の項目を無効にします
id	string	''	一意の項目識別子

イベント

イベント	発生するタイミング	引数
beforeItemRender	各項目のレンダリング前	cancel, element, item, name
itemClick	項目がクリックされたとき	cancel, element, event, item, name
created	コンポーネントのレンダリング完了時	Event

一般的なユースケース

1. ファイルシステムのナビゲーション：フォルダー／ファイルのアイコンとともに現在のフォルダーパスを表示します
2. Eコマースの商品パス：カテゴリ → サブカテゴリ → 商品の階層を表示します
3. ドキュメントのナビゲーション：ドキュメントのセクションやページを順に移動します
4. 複数ステップのフォーム：フォームの各ステップと進捗状況を表示します
5. ウェブサイトのナビゲーション：サイト階層内での現在のページの位置を表示します

---

次のステップ：

• ニーズに応じた適切なリファレンスファイルを読みます
• コード例をコピーし、ユースケースに合わせて調整します
• 高度なプロパティについては、API ドキュメントを参照します
• さまざまなテーマ（Tailwind、Bootstrap、Fluent、Material）でテストします