パンくずナビゲーション

要件

インラインリンクを表示することにより、サイトの階層を表示します。項目の間には区切り文字があり、個々のページ間の階層を示し、現在のページが最後に表示されます。

レシピ

.breadcrumb li:not(:first-child)::before {
  content: "→";
}

行った選択

このパターンは単純なフレックスレイアウトを使用してレイアウトされており、CSS の 1 行でナビゲーションがどのように行われるかを示しています。 区切り文字は CSS 生成コンテンツを使用して追加されます。 区切り文字は好きなものに変更することができます。

アクセシビリティの考慮

aria-label 属性および aria-current 属性を使用して、このナビゲーションが何であるか、そして現在のページが構造のどこにあるのかを支援技術のユーザーが理解できるようにしてください。 詳細については関連リンクを参照してください。

content で追加した矢印 → は、スクリーンリーダーや点字ディスプレイにも公開されるので注意してください。

関連情報

• CSS フレックスボックスレイアウト
• パンくずリストの提供（英語）
• aria-current 属性の使用（英語）