サイトの中で今どのページを見ているか、訪れた人にすぐ伝えられているでしょうか。

ページの上部に「トップ ＞ サービス ＞ 料金」のように表示する「パンくずリスト」は、地味ですが、使いやすいサイトづくりに欠かせない要素です。
この記事では、コピペするだけで使えるパンくずリストを20個まとめました。

区切り記号やアイコン、背景の有無など、幅広いバリエーションを用意しています。
見出し・カードの記事と同じく、HTMLとCSSを分けて掲載しています。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。

続いて、HTMLのコードを、ページの上部など、現在地を示したい場所に貼り付けます。
多くはナビゲーションとしての意味を持たせるため、navタグとolタグ（順序のあるリスト）で作っています。

各リンクのhref（リンク先）は、サンプルでは「#」にしているので、実際のページURLに書き換えてください。

01. シンプルなスラッシュ区切り

「/」で区切った、もっとも基本のパンくずリストです。

実際の見た目

HTMLコード

<nav class="kts-bc01" aria-label="パンくずリスト"> <a href="#">トップ</a> / <a href="#">サービス</a> / <span>料金</span> </nav>

CSSコード

.kts-bc01 { font-size: 13px; color: #8A94A0; font-family: sans-serif; } .kts-bc01 a { color: #3F8CFF; text-decoration: none; } .kts-bc01 a:hover { text-decoration: underline; } .kts-bc01 span { color: #444; }

02. 山括弧（＞）区切り

「＞」を区切りに使った、よく見かける定番の形です。

実際の見た目

HTMLコード

<nav class="kts-bc02" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">＞</span><a href="#">ブログ</a><span class="sep">＞</span><span class="current">記事一覧</span> </nav>

CSSコード

.kts-bc02 { font-size: 13px; color: #8A94A0; font-family: sans-serif; } .kts-bc02 a { color: #3F8CFF; text-decoration: none; } .kts-bc02 .sep { margin: 0 8px; color: #D8DCE1; } .kts-bc02 .current { color: #444; }

03. 矢印アイコン区切り

「→」の矢印を区切りに使ったパンくずリストです。

実際の見た目

HTMLコード

<nav class="kts-bc03" aria-label="パンくずリスト"> <a href="#">ホーム</a><span class="sep">→</span><a href="#">商品一覧</a><span class="sep">→</span><span class="current">商品詳細</span> </nav>

CSSコード

.kts-bc03 { font-size: 13px; color: #8A94A0; font-family: sans-serif; } .kts-bc03 a { color: #2E6F5E; text-decoration: none; } .kts-bc03 .sep { margin: 0 8px; color: #B7C2CC; } .kts-bc03 .current { color: #444; font-weight: 600; }

04. 中黒（・）区切り

「・」を使った、やわらかい印象のパンくずリストです。

実際の見た目

HTMLコード

<nav class="kts-bc04" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">・</span><a href="#">よくある質問</a> </nav>

CSSコード

.kts-bc04 { font-size: 13px; color: #8A94A0; font-family: sans-serif; } .kts-bc04 a { color: #3F8CFF; text-decoration: none; } .kts-bc04 .sep { margin: 0 6px; }

05. ホームアイコン始まりのパンくず

先頭を家のアイコンにした、視覚的に分かりやすい形です。

実際の見た目

HTMLコード

<nav class="kts-bc05" aria-label="パンくずリスト"> <a href="#" aria-label="ホーム">🏠</a><span class="sep">＞</span><a href="#">お知らせ</a><span class="sep">＞</span><span class="current">詳細</span> </nav>

CSSコード

.kts-bc05 { font-size: 13px; color: #8A94A0; font-family: sans-serif; display: flex; align-items: center; } .kts-bc05 a { color: #3F8CFF; text-decoration: none; } .kts-bc05 .sep { margin: 0 8px; color: #D8DCE1; } .kts-bc05 .current { color: #444; }

06. 現在地だけ色付けしたパンくず

リンク部分は控えめに、現在地だけ濃い色で示す形です。

実際の見た目

HTMLコード

<nav class="kts-bc06" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><a href="#">会社情報</a><span class="sep">/</span><span class="current">アクセス</span> </nav>

CSSコード

.kts-bc06 { font-size: 13px; font-family: sans-serif; } .kts-bc06 a { color: #B0B7BE; text-decoration: none; } .kts-bc06 .sep { margin: 0 6px; color: #D8DCE1; } .kts-bc06 .current { color: #1F2933; font-weight: 700; }

07. 背景付きピル型パンくず

各項目を背景色付きのピル型にした、カジュアルな見た目です。

実際の見た目

HTMLコード

<nav class="kts-bc07" aria-label="パンくずリスト"> <a href="#">トップ</a><a href="#">ブログ</a><span class="current">記事タイトル</span> </nav>

CSSコード

.kts-bc07 { display: flex; gap: 6px; font-family: sans-serif; font-size: 12px; } .kts-bc07 a, .kts-bc07 .current { padding: 4px 12px; background: #F1F3F5; border-radius: 999px; color: #444; text-decoration: none; } .kts-bc07 .current { background: #2E6F5E; color: #fff; }

08. 矢印タグ形状でつながるパンくず

矢印の形をしたタグが連なる、立体的な見た目です。

実際の見た目

HTMLコード

<nav class="kts-bc08" aria-label="パンくずリスト"> <a href="#">トップ</a><a href="#">サービス一覧</a><span class="current">詳細</span> </nav>

CSSコード

.kts-bc08 { display: flex; font-family: sans-serif; font-size: 12px; } .kts-bc08 a, .kts-bc08 .current { padding: 6px 18px 6px 14px; background: #E4E7EB; color: #444; text-decoration: none; clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%); margin-right: -10px; } .kts-bc08 .current { background: #2E6F5E; color: #fff; }

09. 下線ホバーのパンくず

カーソルを合わせると下線が現れる、控えめな動きのパンくずです。

実際の見た目

HTMLコード

<nav class="kts-bc09" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><a href="#">導入事例</a> </nav>

CSSコード

.kts-bc09 { font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc09 a { position: relative; color: #333; text-decoration: none; } .kts-bc09 a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: #333; transform: scaleX(0); transition: transform 0.2s ease; } .kts-bc09 a:hover::after { transform: scaleX(1); } .kts-bc09 .sep { margin: 0 8px; }

10. 全幅の背景バーに乗ったパンくず

帯状の背景の上に表示する、ページ上部向けのパンくずです。

実際の見た目

HTMLコード

<nav class="kts-bc10" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">＞</span><span class="current">お問い合わせ</span> </nav>

CSSコード

.kts-bc10 { display: block; width: 100%; max-width: 400px; padding: 10px 16px; background: #F1F3F5; font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc10 a { color: #3F8CFF; text-decoration: none; } .kts-bc10 .sep { margin: 0 8px; } .kts-bc10 .current { color: #444; }

11. 現在地に太字と下線を使うパンくず

最後の項目だけ、太字と下線で強調する形です。

実際の見た目

HTMLコード

<nav class="kts-bc11" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><span class="current">料金プラン</span> </nav>

CSSコード

.kts-bc11 { font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc11 a { color: #3F8CFF; text-decoration: none; } .kts-bc11 .sep { margin: 0 8px; } .kts-bc11 .current { color: #1F2933; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

12. カード内に収めたパンくず

枠線付きの箱の中に、パンくずリストを収める形です。

実際の見た目

HTMLコード

<nav class="kts-bc12" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><span class="current">会員登録</span> </nav>

CSSコード

.kts-bc12 { display: inline-block; padding: 8px 16px; border: 1px solid #E4E4E4; border-radius: 6px; font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc12 a { color: #3F8CFF; text-decoration: none; } .kts-bc12 .sep { margin: 0 8px; } .kts-bc12 .current { color: #444; }

13. ダークテーマのパンくず

暗い背景に合わせた配色のパンくずリストです。

実際の見た目

HTMLコード

<nav class="kts-bc13" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><span class="current">開発者向け情報</span> </nav>

CSSコード

.kts-bc13 { font-size: 13px; font-family: sans-serif; color: #6B7580; } .kts-bc13 a { color: #4CE0D2; text-decoration: none; } .kts-bc13 .sep { margin: 0 8px; } .kts-bc13 .current { color: #E6E9EC; }

14. 現在地に背景バッジを付けたパンくず

最後の項目だけ、背景色付きのバッジのように見せる形です。

実際の見た目

HTMLコード

<nav class="kts-bc14" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">＞</span><span class="current">キャンペーン詳細</span> </nav>

CSSコード

.kts-bc14 { font-size: 13px; font-family: sans-serif; color: #8A94A0; display: flex; align-items: center; } .kts-bc14 a { color: #3F8CFF; text-decoration: none; } .kts-bc14 .sep { margin: 0 8px; } .kts-bc14 .current { background: #D97757; color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 12px; }

15. 中間を省略したパンくず

階層が深い時に、途中を「…」で省略する形です。

実際の見た目

HTMLコード

<nav class="kts-bc15" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><span class="ellipsis">…</span><span class="sep">/</span><span class="current">現在のページ</span> </nav>

CSSコード

.kts-bc15 { font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc15 a { color: #3F8CFF; text-decoration: none; } .kts-bc15 .sep { margin: 0 8px; } .kts-bc15 .ellipsis { color: #C7CDD3; } .kts-bc15 .current { color: #444; }

16. 斜体スラッシュのスタイリッシュなパンくず

区切りのスラッシュを斜体にした、少し洗練された見た目です。

実際の見た目

HTMLコード

<nav class="kts-bc16" aria-label="パンくずリスト"> <a href="#">Top</a><span class="sep">/</span><a href="#">Works</a><span class="sep">/</span><span class="current">Detail</span> </nav>

CSSコード

.kts-bc16 { font-size: 13px; font-family: sans-serif; color: #8A94A0; letter-spacing: 0.02em; } .kts-bc16 a { color: #1F2933; text-decoration: none; } .kts-bc16 .sep { margin: 0 10px; font-style: italic; color: #C7CDD3; } .kts-bc16 .current { color: #8A94A0; }

17. モバイル向け「前のページに戻る」形式

パンくず全体ではなく、1つ前のページだけを示す簡易形式です。

実際の見た目

HTMLコード

<nav class="kts-bc17" aria-label="パンくずリスト"> <a href="#"><span aria-hidden="true">←</span> サービス一覧に戻る</a> </nav>

CSSコード

.kts-bc17 { font-size: 13px; font-family: sans-serif; } .kts-bc17 a { color: #3F8CFF; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

18. グラデーション区切り線付きパンくず

各項目の間に、小さなグラデーションの点を挟む形です。

実際の見た目

HTMLコード

<nav class="kts-bc18" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="dot"></span><a href="#">特集</a><span class="dot"></span><span class="current">夏の特集</span> </nav>

CSSコード

.kts-bc18 { display: flex; align-items: center; font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc18 a { color: #333; text-decoration: none; } .kts-bc18 .dot { width: 5px; height: 5px; border-radius: 50%; margin: 0 10px; background: linear-gradient(135deg, #6C63FF, #3F8CFF); } .kts-bc18 .current { color: #444; }

19. 番号付き階層パンくず

各階層に番号を振って、深さを分かりやすくする形です。

実際の見た目

HTMLコード

<nav class="kts-bc19" aria-label="パンくずリスト"> <a href="#"><span class="n">1</span>トップ</a><span class="sep">/</span><a href="#"><span class="n">2</span>マニュアル</a><span class="sep">/</span><span class="current"><span class="n">3</span>初期設定</span> </nav>

CSSコード

.kts-bc19 { font-size: 13px; font-family: sans-serif; color: #8A94A0; display: flex; align-items: center; } .kts-bc19 a, .kts-bc19 .current { display: inline-flex; align-items: center; gap: 5px; color: #333; text-decoration: none; } .kts-bc19 .n { width: 16px; height: 16px; line-height: 16px; text-align: center; background: #E4E7EB; border-radius: 50%; font-size: 10px; color: #666; } .kts-bc19 .sep { margin: 0 8px; } .kts-bc19 .current { color: #1F2933; font-weight: 700; }

20. 全項目に下線を引いたパンくず

現在地も含めて、すべての項目にうっすら下線を引く形です。

実際の見た目

HTMLコード

<nav class="kts-bc20" aria-label="パンくずリスト"> <a href="#">トップ</a><span class="sep">/</span><a href="#">採用情報</a><span class="sep">/</span><span class="current">募集要項</span> </nav>

CSSコード

.kts-bc20 { font-size: 13px; font-family: sans-serif; color: #8A94A0; } .kts-bc20 a, .kts-bc20 .current { border-bottom: 1px solid #D8DCE1; padding-bottom: 1px; color: #444; text-decoration: none; } .kts-bc20 .sep { margin: 0 8px; }

カスタマイズの小ワザ

• 各リンクのhref（href=”#”の部分）は、実際のページURLに書き換えてください。
• 最後の現在地の項目は、リンクにせずspanタグのままにするのが一般的です。今見ているページ自体へのリンクは不要なためです。
• 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。
• 構造化データ（パンくずリストであることを検索エンジンに伝える設定）を追加したい場合は、別途JSON-LDなどの設定が必要です。この記事のコードは見た目のみを扱っています。
• 階層が深すぎる場合は、15番のように途中を省略する形も検討してください。

まとめ｜早見表

雰囲気	該当するパンくず
シンプル・定番	01, 02, 03, 04, 06
背景・装飾あり	07, 08, 10, 12, 14
アイコン・記号付き	05, 17, 18, 19
動き・ホバー	09
階層が深いサイト向け	15
個性的なトーン	13, 16, 20

20個のパンくずリストは、区切り記号・背景・アイコンの違いで、サイトのトーンに合わせて選べる。現在地の項目はリンクにせず示すのが基本である。

※本記事のコードは2026年9月時点の主要ブラウザでの表示を想定しています。08番のclip-pathは、一部の古いブラウザで見た目が異なる場合があります。