コンポーネント / navigation

navigation · @awesome-ds/react

Breadcrumb

現在地までの階層を示すナビゲーション。

関連ルール: rule.a11y.wcag-aa

状態マトリクス

現在必須

構造

  • 名前付きナビゲーション
  • 順序付き階層
  • 現在ページ

キーボード操作契約

リンクは標準のTab・Enter操作を維持し、現在ページは不要にリンク化しません。

スクリーンリーダー契約

名前付きナビゲーションとして現在地までの階層を読み、現在ページをaria-currentで示します。

コンテンツ規則

  • URLではなくページ名を使います。
  • 省略する場合も中間階層だけにします。

公開API

プロパティ型必須説明
itemsBreadcrumbItem[]必須表示する項目とその内容。
ariaLabelstring—支援技術向けにローカライズした領域名。

環境適応契約

RTL
論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
ハイコントラスト
背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
動きを減らす設定
状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

Breadcrumb/current-page, Breadcrumb/localized-label

ライブ表示

ライブ表示

コピー可能な実装例

import { Breadcrumb } from "@awesome-ds/react";

<Breadcrumb items={[{label:'Home',href:'/'},{label:'Here'}]} />