概要
シンプルな見た目と、schema.orgに基づく構造化マークアップを実装。ホームアイコンも追加し、様々なデザインに応用しやすいよう制作しました。
プレビュー
HTML
<nav aria-label="パンくずリスト" class="breadcrumbs">
<ol class="breadcrumbs__list" itemscope itemtype="https://schema.org/BreadcrumbList">
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/" class="breadcrumbs__link" itemprop="item">
<span itemprop="name">ホーム</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/category/" class="breadcrumbs__link" itemprop="item">
<span itemprop="name">カテゴリー</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span class="breadcrumbs__current" itemprop="name">現在のページ</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>CSS
※CSS Nestingを使用しています。
.breadcrumbs {
--_icon-home: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" xml:space="preserve"><g><polygon points="256.031,7.375 0,190.313 0,504.625 201.609,504.625 201.609,336.672 310.391,336.672 310.391,504.625 512,504.625 512,190.313"></polygon></g></svg>');
--_icon-chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"><g><polygon points="163.916,0 92.084,71.822 276.258,255.996 92.084,440.178 163.916,512 419.916,255.996"></polygon></g></svg>');
--_link-color: oklch(45% 0.1 250);
--_current-color: var(--color-text-secondary);
--_hover-color: oklch(30% 0.15 250);
--_hover-bg-color: oklch(95% 0.05 250);
--_focus-outline-color: oklch(50% 0.2 250);
--_transition-duration: .2s;
}
/* ダークモード対応 */
[data-theme="dark"] .breadcrumbs {
--_link-color: oklch(65% 0.1 250);
--_hover-color: oklch(75% 0.15 250);
--_hover-bg-color: oklch(15% 0.05 250);
--_focus-outline-color: oklch(70% 0.2 250);
}
.breadcrumbs__list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0 .3em;
margin: 0;
padding: 0;
list-style: none;
font-size: .875em;
li:first-child {
span {
display: flex;
align-items: center;
gap: .5em;
&::before {
content: "";
display: block;
inline-size: 1em;
block-size: 1em;
margin-block-end: .2em;
background-color: var(--_link-color);
mask: var(--_icon-home) no-repeat center/contain;
}
}
}
}
.breadcrumbs__item {
display: flex;
align-items: center;
margin: 0;
&:not(:last-child)::after {
content: "";
display: block;
inline-size: .5em;
block-size: .5em;
margin-inline-start: .3em;
background-color: var(--_link-color);
mask: var(--_icon-chevron) no-repeat center/contain;
}
}
.breadcrumbs__link {
color: var(--_link-color);
text-decoration: none;
padding: .3em;
border-radius: .25em;
transition: color var(--_transition-duration) ease, background-color var(--_transition-duration) ease;
@media (any-hover: hover) {
&:hover {
color: var(--_hover-color);
background-color: var(--_hover-bg-color);
}
}
&:focus {
outline: 2px solid var(--_focus-outline-color);
outline-offset: 2px;
}
}
.breadcrumbs__current {
color: var(--_current-color);
padding: .25em .5em;
}