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

縮小版モバイル向けパンくず

中間階層を「…」で省略し、狭い画面でも1行に収まる形。スマートフォン表示のヘッダー下などに適します。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-05-08-crumb" aria-label="breadcrumb">
          <span class="d03-05-08-item">ホーム</span>
          <span class="d03-05-08-sep">/</span>
          <span class="d03-05-08-item d03-05-08-ellipsis">…</span>
          <span class="d03-05-08-sep">/</span>
          <span class="d03-05-08-item d03-05-08-current">現在のページ</span>
        </nav>

CSS

.d03-05-08-crumb{display:flex;flex-wrap:nowrap;align-items:center;font-size:13px;font-family:sans-serif;color:#666;gap:6px;max-width:100%;overflow:hidden}
        .d03-05-08-item{color:#666;white-space:nowrap}
        .d03-05-08-ellipsis{color:#aaa}
        .d03-05-08-sep{color:#ccc}
        .d03-05-08-current{color:#222;font-weight:600;text-overflow:ellipsis;overflow:hidden}

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