コンポーネント一覧
Breadcrumbs
階層が2段以下なら不要。href を省いた最後の項目が現在地になる。
デモ
Props
| 名前 | 型 | 説明 |
|---|---|---|
| size | 'sm' | 'md' | 'lg' | |
| separator | ReactNode | 区切り文字。既定はテーマが決める |
| isDisabled | boolean | |
| children | ReactNode | |
| classNames | ClassNames<typeof breadcrumbsSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- list必須
- item必須
- link
- separator
- current
アクセシビリティ
- `nav[aria-label]` として提示され、現在地は `aria-current="page"`。区切り記号は `aria-hidden`
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。