Breadcrumbs (パンくずリスト) コンポーネント New

Ignite UI for React Breadcrumbs コンポーネントは、設定可能なアイコンで区切られた一連のナビゲーション項目を順序付きで表示し、サイト階層内でのユーザーの現在位置を伝えるとともに、上位のページに戻るための手段を提供します。

ライブ デモ

React Breadcrumbs のデモでは、末尾の項目が現在のページとしてマークされた 3 項目のパンくずリストを表示します。

構造

React Breadcrumbs コンポーネントは 2 つの要素で構成されます。共有状態を管理し、ARIA リストとしてレンダリングされるコンテナーと、スロットに配置された任意のコンテンツとその後ろの区切り記号をレンダリングする 1 つ以上の項目 (子要素) です。

<igc-breadcrumbs role="list">
  <igc-breadcrumb role="listitem">
    ├── ::part(label)
    │   ├── slot="prefix"                 // optional prefix content
    │   ├── default slot                  // main content, typically <a>
    │   └── slot="suffix"                 // optional suffix content
    └── ::part(separator)                 // hidden on the last item
        └── slot="separator"              // per-item override
  </igc-breadcrumb>
  <!-- more <igc-breadcrumb> items ... -->
  <igc-breadcrumb current role="listitem" aria-current="page">
    <!-- last item, no trailing separator -->
  </igc-breadcrumb>
</igc-breadcrumbs>

作業の開始

React Breadcrumbs を使用するには、基本的なプロジェクト セットアップについてIgnite UI for React の作業の開始 トピックに従ってから、コンポーネントを登録します。

Breadcrumbs コンポーネントには igniteui-react 19.9.0 以降が必要です。

IgrBreadcrumbs および IgrBreadcrumb ラッパーとテーマをインポートします:

import { IgrBreadcrumbs, IgrBreadcrumb } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Breadcrumbs コンテナー内に階層レベルごとに 1 つの Breadcrumb 項目を配置して、パンくずリストを構成します。各項目はデフォルト スロットに任意のコンテンツを受け入れます。最も一般的なのは、ナビゲーションを処理するアンカーです:

<IgrBreadcrumbs>
  <IgrBreadcrumb><a href="/home">Home</a></IgrBreadcrumb>
  <IgrBreadcrumb><a href="/home/products">Products</a></IgrBreadcrumb>
  <IgrBreadcrumb current={true}><a href="/home/products/laptop">Laptop</a></IgrBreadcrumb>
</IgrBreadcrumbs>

使用方法

現在のページ

現在表示しているページを表す項目を current プロパティでマークします。項目はこれを属性として反映し、aria-current="page" を設定するため、スクリーン リーダーは現在のページをアナウンスします。

<IgrBreadcrumbs>
  <IgrBreadcrumb><a href="/home">Home</a></IgrBreadcrumb>
  <IgrBreadcrumb current={true}><a href="/home/dashboard">Dashboard</a></IgrBreadcrumb>
</IgrBreadcrumbs>

共有の区切り記号

コンテナーの separator プロパティを使用して、パンくずリスト内のすべての項目に共通の区切り記号アイコンを設定します。値は登録済みのアイコン コレクションのアイコン名で、コンテナーがそれを各項目に伝播します。

<IgrBreadcrumbs separator="slash">
  <IgrBreadcrumb><a href="/home">Home</a></IgrBreadcrumb>
  <IgrBreadcrumb><a href="/home/products">Products</a></IgrBreadcrumb>
  <IgrBreadcrumb><a href="/home/products/laptops">Laptops</a></IgrBreadcrumb>
  <IgrBreadcrumb current={true}><a href="/home/products/laptops/gaming">Gaming Laptop</a></IgrBreadcrumb>
</IgrBreadcrumbs>

末尾の区切り記号はパンくずリストの最後の項目では自動的に非表示になるため、手動で省略する必要はありません。

項目ごとの区切り記号のオーバーライド

区切り記号は、その項目の separator スロットにコンテンツを配置することで、単一の項目に対してオーバーライドすることもできます。これは、テキストの区切り記号 (/ や › など) とアイコンを組み合わせる場合や、境界ごとにまったく異なる区切り記号を使用する場合に便利です。

<IgrBreadcrumbs>
  <IgrBreadcrumb>
    <a href="/home">Home</a>
    <span slot="separator">/</span>
  </IgrBreadcrumb>
  <IgrBreadcrumb current={true}><a href="/home/settings">Settings</a></IgrBreadcrumb>
</IgrBreadcrumbs>

プレフィックスとサフィックスのコンテンツ

各 Breadcrumb 項目は、メイン コンテンツの前後にアイコン、バッジ、ステータス インジケーターなどの補足コンテンツを配置するための prefix スロットと suffix スロットを公開します。

<IgrBreadcrumbs>
  <IgrBreadcrumb>
    <IgrIcon slot="prefix" name="home"></IgrIcon>
    <a href="/home">Home</a>
  </IgrBreadcrumb>
  <IgrBreadcrumb>
    <a href="/home/profile">Mail</a>
  </IgrBreadcrumb>
  <IgrBreadcrumb>
    <a href="/home/profile">Messages</a>
  </IgrBreadcrumb>
  <IgrBreadcrumb current={true}>
    <a href="/home/inbox">Inbox</a>
    <IgrBadge slot="suffix" outlined={true} variant="danger">3</IgrBadge>
  </IgrBreadcrumb>
</IgrBreadcrumbs>

折り返しと長いパンくずリスト

コンテナーは、フレックス レイアウトを使用して項目を折り返し可能な 1 行にレンダリングします。パンくずリストが使用可能な幅より長い場合、項目は自動的に次の行に折り返されます。追加の構成は必要ありません。

右から左 (RTL) のレイアウトでは、区切り記号のアイコンは追加の構成なしで自動的に反転されるため、右向きのシェブロンはアイコン名を変更することなく左向きになります。

サイズ

--ig-size 変数を --ig-size-small、--ig-size-medium、--ig-size-large の 3 つのオプションのいずれかに設定して、Breadcrumbs のサイズを制御します。これにより、パンくずリスト内のテキストとアイコンのサイズ、およびそれらのパディングを調整できます。

状態

Breadcrumbs は、hover、focus、pressed、disabled などのさまざまな視覚的状態と、focus-hover や focus-pressed などの組み合わせをサポートします。これらの状態は、各 Breadcrumb 項目の現在のインタラクション ステータスを示すのに役立ちます。

使用すべき場合と使用すべきでない場合

3 階層以上の階層構造を持つコンテンツの多いアプリケーションでは、親ページに戻るための明確で手間のかからないパスを提供してユーザーの現在位置を把握しやすくするために、Breadcrumbs を使用します。不要な視覚的ノイズを生むだけのフラットな単一階層のサイト構造や、代わりに進行状況インジケーターが必要となる段階的なステップ バイ ステップのプロセスでは、Breadcrumbs を使用しないでください。

Do	Don’t
コンテンツが 2 階層より深くネストされている複雑な製品では、Breadcrumbs を使用します。	Breadcrumbs を主要なナビゲーションとして使用することや、階層が 1 レベルしかない場合に使用することは避けてください。

プロパティ

コンテナーは共有の区切り記号を公開し、各項目はその状態を公開します。

IgrBreadcrumbs

IgrBreadcrumb

スタイル設定

React Breadcrumbs の外観は、CSS 変数、CSS パーツ、およびテーマ設定システムを通じて制御されます。

スタイル変数

スタイル パーツ

IgrBreadcrumb

Sass テーマ

Sass を通じて Breadcrumbs の外観をカスタマイズするには、breadcrumb-theme 関数を使用します。

@use "igniteui-theming/sass/themes" as *;

$my-breadcrumb-theme: breadcrumb-theme(
    $text-color: #1E2125,
    $icon-color: #8B5BB1
);

:root {
  @include tokens($my-breadcrumb-theme);
}

CSS 変数

Sass ビルド ステップなしでローカルにスタイル設定する必要がある場合は、コンポーネントの CSS 変数を直接設定します。

igc-breadcrumbs {
  --ig-breadcrumb-text-color: var(--ig-primary-50);
  --ig-breadcrumb-icon-color: var(--ig-primary-200);
  --ig-breadcrumb-separator-color: var(--ig-gray-200);
}

igc-breadcrumb::part(label) {
  padding-inline: 0.25rem;
}

Tailwind によるスタイル設定

ユーティリティ ファーストのスタイル設定を行うには、Tailwind ユーティリティ クラスを Breadcrumbs の CSS 変数と組み合わせます。最初に Ignite UI テーマで Tailwind をセットアップします:

@import "tailwindcss/theme.css";
@import "tailwindcss/utilities.css";

<IgrBreadcrumbs className="!light-breadcrumb ![--ig-breadcrumb-text-color:var(--ig-primary-50)]">
  <IgrBreadcrumb><a href="/">Root</a></IgrBreadcrumb>
  <IgrBreadcrumb current={true}><a href="/current">Current</a></IgrBreadcrumb>
</IgrBreadcrumbs>

感嘆符 (!) により、Tailwind ユーティリティがコンポーネントのデフォルト スタイルより優先されます。

アクセシビリティ

React Breadcrumbs は、ARIA のパンくずリスト ナビゲーション パターンに従います。コンテナーは ARIA の list ロールを公開し、各項目は listitem ロールを公開し、現在の項目は aria-current="page" でアナウンスされます。

アクセシブルなナビゲーション ランドマーク

支援技術がナビゲーション ランドマークとして認識できるように、パンくずリストを aria-label 付きの <nav> 要素でラップします。ARIA のパンくずリスト パターンに従い、ラベルはリストではなく <nav> に設定します。

<nav aria-label="Breadcrumb">
  <IgrBreadcrumbs>
    <IgrBreadcrumb><a href="/">Root</a></IgrBreadcrumb>
    <IgrBreadcrumb current={true}><a href="/products">Products</a></IgrBreadcrumb>
  </IgrBreadcrumbs>
</nav>

キーボード インタラクション

Breadcrumbs コンポーネントはカスタムのキーボード処理を実装していません。ナビゲーションは、スロットに配置されたインタラクティブなコンテンツのネイティブな動作に依存します:

スクリーン リーダー / ARIA

• Breadcrumbs ホストには role="list" があります。
• 各 Breadcrumb ホストには role="listitem" があります。
• current を true に設定するとホストに aria-current="page" が適用され、false に戻すとその属性が削除されます。
• disabled を true に設定すると、ホストに aria-disabled="true" が適用されます。
• 区切り記号のアイコンは装飾的なものであり、スクリーン リーダーによって読み上げられることはありません。

アクセシビリティ準拠

Infragistics は、Section 508 および WCAG 2.1 ガイドライン領域に関する Ignite UI for React のアクセシビリティ サポートを アクセシビリティ コンプライアンス トピックで説明しています。

ユーザー側の責任:

• Breadcrumbs コンテナーを <nav> 要素でラップし、"Breadcrumb" や "Product category" などのわかりやすい aria-label を設定してください。
• スクリーン リーダーが単一の現在のページをアナウンスするように、パンくずリストごとに 1 つの項目のみを current としてマークしてください。
• スロットに配置した各アンカー内に意味のあるテキスト ラベルを提供してください。リンク先を伝えるためにプレフィックス アイコンだけに依存しないでください。

トラブルシューティング

React Breadcrumbs のトラブルシューティング ガイダンスは、一般的な統合およびレンダリングの問題について、問題 → 原因 → 修正の形式に従います。

一部の項目で区切り記号が表示されないのはなぜですか?

区切り記号は、パンくずリストの最後の項目では自動的に非表示になります。これは ARIA のパンくずリスト パターンにおける意図された動作です。想定外の項目で区切り記号が表示されない場合は、その項目がコンテナー内で最後に表示されている子要素になっていないか確認してください。

‘separator’ に設定したカスタム アイコン名がレンダリングされないのはなぜですか?

区切り記号のアイコンは、アイコン レジストリに登録されている必要があります。パンくずリストをレンダリングする前にアイコンを登録するか、テーマに付属するデフォルトの tree_expand アイコンにフォールバックしてください。

RTL でパンくずリストが折り返されないのはなぜですか?

折り返しは RTL 固有のものではなく、コンテンツの合計幅がコンテナーの幅を超えた場合に常に発生します。RTL コンテキストでは、視覚的な順序が反転され、区切り記号のアイコンは自動的に反転されます。それでもパンくずリストがオーバーフローする場合は、親要素がコンテナーの本来の幅の確保を妨げていないか確認してください。

既知の制限事項

React Breadcrumbs には、プラットフォームに依存しない次の制限事項があります。

• Breadcrumbs コンポーネントはカスタムのキーボード処理を実装していません。アクティブ化は、各項目のスロットに配置されたインタラクティブな要素 (通常はアンカー) に依存します。
• Breadcrumbs は独自の <nav> ランドマークをレンダリングしません。<nav aria-label="..."> ラッパーは、使用するアプリケーション側で提供する必要があります。
• コンテナーは長いパンくずリストを自動的に切り詰めません。幅の狭い画面で 1 行のパンくずリストが必要な場合は、自然なフレックスの折り返しと独自のオーバーフロー戦略 (中間の項目をメニューに折りたたむなど) を組み合わせてください。

API リファレンス

Breadcrumbs の完全な API サーフェスについては、これらの API リファレンスを使用してください。

依存関係

React Breadcrumbs は、ビジュアル スタイルを適用するためにテーマ スタイルシートを必要とします。作業の開始のフレームワーク固有のセットアップを参照してください。

その他のリソース

サポートと関連する Ignite UI ドキュメントについては、以下のリソースを使用してください。

• Ignite UI for React フォーラム
• Ignite UI for React GitHub

関連コンポーネント

ナビゲーションの範囲が単一の階層パスより広い場合は、これらの関連コンポーネントを使用します。

• Navbar — アクションとアイデンティティを備えたアプリケーションの主要なヘッダーに使用します。
• Navigation Drawer — グループ化されたリンクを持つ、固定または折りたたみ可能なサイド ナビゲーションに使用します。

FAQ