パンくずリスト Breadcrumb

現在のページ階層を表示し、上位ページへの遷移を可能にする。

使用場面: 深い階層構造のWebサイトでユーザーの現在位置を示す場合 採用例: Amazon, Wikipedia

ライブデモ

ソースコード

<nav class="demo-breadcrumb" aria-label="パンくずリスト">
  <ol class="demo-breadcrumb-list">
    <li class="demo-breadcrumb-item"><a href="#">ホーム</a></li>
    <li class="demo-breadcrumb-item"><a href="#">カテゴリ</a></li>
    <li class="demo-breadcrumb-item"><a href="#">サブカテゴリ</a></li>
    <li class="demo-breadcrumb-item current" aria-current="page">現在のページ</li>
  </ol>
</nav>
.demo-breadcrumb-list {
  display: flex; align-items: center; gap: 0;
  list-style: none; padding: 0; margin: 0; flex-wrap: wrap;
}
.demo-breadcrumb-item { font-size: 14px; }
.demo-breadcrumb-item + .demo-breadcrumb-item::before {
  content: "/"; margin: 0 10px; color: #ccc;
}
.demo-breadcrumb-item a {
  color: var(--ui-primary); text-decoration: none;
  transition: opacity 0.2s;
}
.demo-breadcrumb-item a:hover { opacity: 0.7; text-decoration: underline; }
.demo-breadcrumb-item.current { color: #666; font-weight: 600; }

AIプロンプト

Basic 
パンくずリストをHTML/CSSで作ってください。ホーム > カテゴリ > 現在のページ の形式で表示します。
Custom 
以下の仕様でパンくずリストを実装してください。
- セパレーターにシェブロンアイコン（>）を使用
- プライマリカラー: #2563eb
- 最後の項目は太字で非リンク
- レスポンシブ対応（長い場合は省略表示「...」）
- ホームアイコン付き
Advanced 
構造化データ対応のパンくずリストを実装してください。
- JSON-LD（schema.org BreadcrumbList）を自動生成
- aria-label="パンくずリスト"、aria-current="page" を使用
- レスポンシブ：モバイルでは折りたたみ（中間階層を「...」で省略）
- キーボードナビゲーション対応
- 動的にパスを生成する関数を含む
- RTL（右から左）言語にも対応
← カタログに戻る