パンくずナビゲーション

要件

各ページ間の階層関係を示すため、アイテム間に区切り文字をつけてインラインリンクを表示させ、現在のページが最後に現れるように、サイトの階層構造を表示します。

レシピ

以下のコードブロックの "Play" をクリックすると、この例を MDN Playground で開きます。

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Sub Category</a></li>
    <li><a href="#">Type</a></li>
    <li><span aria-current="page">Product</span></li>
  </ol>
</nav>

body {
  font: 1.2em sans-serif;
}

.breadcrumb {
  padding: 0 0.5rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: end;
}

.breadcrumb li:not(:last-child)::after {
  display: inline-block;
  margin: 0 0.25rem;
  content: "→";
}

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

選択したもの

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

アクセシビリティの考慮

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

上記の例で、CSS の content プロパティを通じて追加された区切り矢印 → は、スクリーンリーダーや点字ディスプレイなどの支援技術 (AT) に公開される点にご注意ください。より目立たない解決策として、HTML内で装飾用の <img> を使用し、alt 属性を空に設定してください。ARIA role を none または presentation に設定しても、画像が支援技術に公開されるのを同時に防ぐことができます。

あるいは、CSS 生成コンテンツを無音にするために、スラッシュ (/) を先頭に置き、空文字列を代替テキストとして記載することで、することもできます。例えば、content: url("arrow.png") / ""; のようにします。

AT に公開される生成された区切り文字を記載する場合は、::after 擬似要素セレクターを ::before の代わりに使用して生成コンテンツを作成するようにしてください。そうすることで、区切り文字のコンテンツが HTML コンテンツの「前」ではなく「後」として公開されるようになります。

関連情報

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