Breadcrumb
ユーザーが現在どこにいるかを示す階層ナビゲーション。3階層以上の深いサイト構造で、ユーザーが上位ページに戻れるようにするときに使う。
インストール
npx shoji add breadcrumb
プレビュー
使用例
使い方
こんなときに使う
- カテゴリ > サブカテゴリ > 商品ページなど、3階層以上の深いページ
- ECサイト・ニュースサイト・ドキュメントサイトのような階層構造
使わないほうがいい場面
- 2階層以下のシンプルなサイト（ヘッダーのナビで十分）
- SPAでページ遷移がない場合（ユーザーの現在地を示す意味がない）
JP 最適化のポイント
- 現在地（末尾項目）には aria-current="page" を付与 — スクリーンリーダーが「現在のページ」として読み上げる
- 区切り文字は「/」より「›」や「>」を使うと日本語テキストとの親和性が高い