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

矢印区切りパンくず

「>」の矢印記号で階層をつなぐ形。ブログ記事や情報サイトの導線表示にわかりやすく使えます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-02-crumb" aria-label="breadcrumb">
          <span class="d03-05-02-item">ホーム</span>
          <span class="d03-05-02-sep">&gt;</span>
          <span class="d03-05-02-item">ブログ</span>
          <span class="d03-05-02-sep">&gt;</span>
          <span class="d03-05-02-item d03-05-02-current">記事詳細</span>
        </nav>

CSS

.d03-05-02-crumb{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;font-family:sans-serif;color:#555;gap:8px}
        .d03-05-02-item{color:#555}
        .d03-05-02-sep{color:#4a7cff;font-weight:700}
        .d03-05-02-current{color:#111;font-weight:600}

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