Breadcrumb

現在のページ位置を階層的に表示するパンくずリストコンポーネント。

GitHub でソースを見る

プレビュー

使いどころ

使う場面

  • 階層が 3 段以上ある画面で、今いる場所と上位への戻り道を示す（ホーム > 設定 > メンバー）
  • items に { label, href } を順に渡す。最後の項目が現在のページで、リンクにならない
  • Next.js の Link などは各項目の as で渡す

使わない場面

  • 階層のないフラットな画面。置いても情報が増えない
  • 手順の進み具合。Stepper を使う
  • 同じ階層の画面の切り替え。Tabs か Sidebar を使う
  • 最後以外の項目に href を付け忘れること。リンクにならず、ただのテキストになる（上の階層に戻れない）

使い方

<Breadcrumb
  items={[
    { label: "ホーム", href: "/" },
    { label: "プロジェクト", href: "/projects" },
    { label: "設定" },
  ]}
/>

プロパティ

名前型デフォルト説明
items必須BreadcrumbItem[]なしパンくずアイテムの配列 { label, href? }
labelstringなしAccessible label for the nav element (default: "パンくず")

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • <nav aria-label="パンくず"> の中の <ol> になる。label でナビゲーションの名前を変えられる
  • 現在のページには aria-current="page" が付く
  • 区切りの記号は視覚だけで、読み上げには含まれない

文言

  • label は遷移先ページの見出しと同じ言葉にする
  • ページ名を略さない。階層が深いときは中間の項目を減らすのではなく、階層自体を見直す

関連するコンポーネント