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

ピル型パンくず

各階層を丸みのあるピル形状で表示する形。採用サイトやコーポレートサイトの柔らかい印象づくりに向きます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-03-crumb" aria-label="breadcrumb">
          <span class="d03-05-03-pill">ホーム</span>
          <span class="d03-05-03-pill">会社情報</span>
          <span class="d03-05-03-pill d03-05-03-current">採用情報</span>
        </nav>

CSS

.d03-05-03-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:sans-serif;font-size:13px}
        .d03-05-03-pill{background:#f1f1f1;color:#666;padding:6px 14px;border-radius:999px}
        .d03-05-03-current{background:#2c2c2c;color:#fff}

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