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

2022/12/242022/12/24

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

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

矢印アイコン

文字色：#333333
アイコン色：#333333
「ホーム」のアイコンありなし

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

<ol class="breadcrumb-001">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリー</a></li>
    <li><a href="#">タイトル</a></li>
</ol>

.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;
}

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

文字色：#333333
アイコン色：#333333
「ホーム」のアイコンありなし

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

<ol class="breadcrumb-005">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリー</a></li>
    <li><a href="#">タイトル</a></li>
</ol>

.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;
}

スラッシュ

文字色：#333333
アイコン色：#333333
「ホーム」のアイコンありなし

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

<ol class="breadcrumb-002">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリー</a></li>
    <li><a href="#">タイトル</a></li>
</ol>

.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;
}

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

灰色背景

背景色：#edf2f6
文字色：#555
「ホーム」のアイコンありなし

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

<ol class="breadcrumb-003">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリー</a></li>
    <li><a href="#">タイトル</a></li>
</ol>

.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;
}

カラフルな背景

背景色：#2589d0
「ホーム」のアイコンありなし

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

<ol class="breadcrumb-004">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリー</a></li>
    <li><a href="#">タイトル</a></li>
</ol>

.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;
}