Bootstrap4 パン粉

Bootstrap4 パンくずリスト

この記事では、Bootstrap4 でパンくずリストを使用する方法について説明します。基本的なパンくずリストの作成方法と、いくつかのオプションを使用してパンくずリストの外観と動作をカスタマイズする方法について説明します。

1. パンくずリストとは？

パンくずリストは、ユーザーがウェブサイトやアプリケーション内のどこにいるのかを明確に理解できるようにするための補助的なナビゲーションシステムです。ユーザーの現在のページがウェブサイト構造のどこにあるかを示し、ユーザーが前のページにすばやく戻れるようにします。

2. 基本的なパンくずリスト

.breadcrumb クラスを使用してパンくずリストを作成します。 <ol> タグと <li> タグを使用して、パンくずリストの構造を定義します。 <a> タグを使用して、異なるページへのリンクを作成します。


<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">ホーム</a></li>
    <li class="breadcrumb-item"><a href="#">ライブラリ</a></li>
    <li class="breadcrumb-item active" aria-current="page">データ</li>
  </ol>
</nav>

3. アクティブな項目

.active クラスを使用して、現在のページを識別します。また、スクリーンリーダーのアクセシビリティを向上させるために、アクティブな項目に aria-current="page" 属性を追加することをお勧めします。

4. 区切り文字

デフォルトでは、Bootstrap4 はパンくずリストの区切り文字として / を使用します。 CSS の ::before 疑似要素を使用して、区切り文字をカスタマイズできます。


.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
}

5. 配置

ユーティリティクラス .justify-content-start、.justify-content-center、または .justify-content-end を使用して、パンくずリストの配置を設定できます。

クラス	説明
`.justify-content-start`	左揃え (デフォルト)
`.justify-content-center`	中央揃え
`.justify-content-end`	右揃え