HTML・CSSでつくるパンくずリストのデザイン5選

ユーザビリティ・SEO両方の面で重要な「パンくずリスト」。大規模なサイトになるほど設置の恩恵も高くなってきます。本ページではそんなパンくずリストをコピペだけで取り入れられるスニペットをまとめました。

シンプルなパンくずリスト

シンプルなパンくずリストの矢印アイコンバージョン

矢印アイコン

step1
デザインを調整する
  • 「ホーム」のアイコン

シンプルなパンくずリスト。「ホーム」アイコンの有無は任意で選択することが可能です。リンクと分かりやすくするために、ホバーアニメーションを加えるのも良いですね。

step2
HTMLをコピペする
HTML
<ol class="breadcrumb-001">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリー</a></li>
    <li><a href="#">タイトル</a></li>
</ol>
step3
CSSをコピペする
CSS
.breadcrumb-001 {
    display: flex;
    gap: 0 22px;
    list-style: none;
    padding: 0;
    font-size: .9em;
}

.breadcrumb-001 li {
    display: flex;
    align-items: center;
}

.breadcrumb-001 li:first-child::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23333333%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    content: '';
}

.breadcrumb-001 li:not(:last-child)::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    margin-left: 10px;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    content: '';
}

.breadcrumb-001 a {
    color: #333333;
    text-decoration: none;
}
シンプルなパンくずリストの矢印(塗りつぶし)アイコンバージョン

矢印(塗りつぶし)アイコン

step1
デザインを調整する
  • 「ホーム」のアイコン

矢印を塗りつぶしてみました。よりコンパクトに見せたい場合におすすめです。

step2
HTMLをコピペする
HTML
<ol class="breadcrumb-005">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリー</a></li>
    <li><a href="#">タイトル</a></li>
</ol>
step3
CSSをコピペする
CSS
.breadcrumb-005 {
    display: flex;
    gap: 0 20px;
    list-style: none;
    padding: 0;
    font-size: .9em;
}

.breadcrumb-005 li {
    display: flex;
    align-items: center;
}

.breadcrumb-005 li:first-child::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23333333%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    content: '';
}

.breadcrumb-005 li:not(:last-child)::after {
    display: inline-block;
    width: .3em;
    height: .6em;
    margin-left: 12px;
    background-color: #333333;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

.breadcrumb-005 a {
    color: #333333;
    text-decoration: none;
}
シンプルなパンくずリストのスラッシュバージョン

スラッシュ

step1
デザインを調整する
  • 「ホーム」のアイコン

区切りをスラッシュにしてみました。「/」という文字をそのまま指定しているので、矢印と比べて若干実装がシンプルになっています。

step2
HTMLをコピペする
HTML
<ol class="breadcrumb-002">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリー</a></li>
    <li><a href="#">タイトル</a></li>
</ol>
step3
CSSをコピペする
CSS
.breadcrumb-002 {
    display: flex;
    gap: 0 15px;
    list-style: none;
    padding: 0;
    font-size: .9em;
}

.breadcrumb-002 li {
    display: flex;
    align-items: center;
}

.breadcrumb-002 li:first-child::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23333333%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    content: '';
}

.breadcrumb-002 li:not(:last-child)::after {
    display: inline-block;
    margin-left: 15px;
    color: #333333;
    content: '/';
}

.breadcrumb-002 a {
    color: #333333;
    text-decoration: none;
}

矢印大きめなパンくずリスト

矢印大きめなパンくずリストの灰色背景バージョン

灰色背景

step1
デザインを調整する
  • 「ホーム」のアイコン

ダッシュボードのような矢印付きのパンくずリスト。白・黒をテーマカラーとしたサイトにおすすめです。

step2
HTMLをコピペする
HTML
<ol class="breadcrumb-003">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリー</a></li>
    <li><a href="#">タイトル</a></li>
</ol>
step3
CSSをコピペする
CSS
.breadcrumb-003 {
    display: flex;
    gap: 0 20px;
    list-style: none;
    padding: 6px 0 6px 18px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #edf2f6;
    font-size: .9em;
}

.breadcrumb-003 li {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 20px;
}

.breadcrumb-003 li:first-child a::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23555%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    vertical-align: text-bottom;
    content: '';
}

.breadcrumb-003 li:not(:last-child)::before,
.breadcrumb-003 li:not(:last-child)::after{
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    content:'';
}

.breadcrumb-003 li:not(:last-child)::before{
    right: 0;
    border-left: 10px solid #c6cdd3;
}

.breadcrumb-003 li:not(:last-child)::after{
    right: 1px;
    border-left: 10px solid #edf2f6;
}

.breadcrumb-003 a {
    color: #555;
    text-decoration: none;
}
矢印大きめなパンくずリストのカラフルな背景バージョン

カラフルな背景

step1
デザインを調整する
  • 「ホーム」のアイコン

背景を単色にすることでより矢印が目立つようにしたパンくずリスト。文字色が白のため、背景はコントラスト強めの色にするのがおすすめです。

step2
HTMLをコピペする
HTML
<ol class="breadcrumb-004">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリー</a></li>
    <li><a href="#">タイトル</a></li>
</ol>
step3
CSSをコピペする
CSS
.breadcrumb-004 {
    display: flex;
    gap: 0 20px;
    list-style: none;
    padding: 6px 0 6px 18px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #2589d0;
    font-size: .9em;
}

.breadcrumb-004 li {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 20px;
}

.breadcrumb-004 li:first-child a::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23fff%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    vertical-align: text-bottom;
    content: '';
}

.breadcrumb-004 li:not(:last-child)::before,
.breadcrumb-004 li:not(:last-child)::after{
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    content:'';
}

.breadcrumb-004 li:not(:last-child)::before{
    right: 0;
    border-left: 10px solid #fff;
}

.breadcrumb-004 li:not(:last-child)::after{
    right: 2px;
    border-left: 10px solid #2589d0;
}

.breadcrumb-004 a {
    color: #fff;
    text-decoration: none;
}