パーツ番号 03-05-04 ・ CSSのみ

背景帯付きパンくず

全体が薄い色の帯に収まり、ページ上部の区切りとして機能する形。ECサイトの商品ページ上部に適しています。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-04-crumb" aria-label="breadcrumb">
          <span class="d03-05-04-item">ホーム</span>
          <span class="d03-05-04-sep">/</span>
          <span class="d03-05-04-item">製品一覧</span>
          <span class="d03-05-04-sep">/</span>
          <span class="d03-05-04-item d03-05-04-current">製品詳細</span>
        </nav>

CSS

.d03-05-04{padding:0}
        .d03-05-04-crumb{width:100%;background:#f6f7f9;border-bottom:1px solid #e6e8eb;padding:14px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:sans-serif;font-size:13px;box-sizing:border-box}
        .d03-05-04-item{color:#777}
        .d03-05-04-sep{color:#c4c7cc}
        .d03-05-04-current{color:#222;font-weight:600}

クラス名 .d03-05-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。