Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | ---
interface Props {
tag?: string;
year?: string;
month?: string;
title: string;
}
const { tag, year, month, title } = Astro.props;
---
<nav aria-label="パンくずリスト" class="breadcrumb-nav">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="/">ホーム</a>
</li>
{tag && (
<li class="breadcrumb-item">
<a href={`/tag/${tag}/`}>{tag}</a>
</li>
)}
{year && month && (
<li class="breadcrumb-item">
<a href={`/${year}/`}>{year}年</a>
</li>
)}
<li class="breadcrumb-item active" aria-current="page">
{title}
</li>
</ol>
</nav>
<style>
.breadcrumb-nav {
padding: 0.75rem 0;
margin-bottom: 0;
}
.breadcrumb-list {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 0.85rem;
}
.breadcrumb-item {
color: #6c757d;
}
.breadcrumb-item + .breadcrumb-item::before {
content: "›";
padding: 0 0.5rem;
color: #adb5bd;
}
.breadcrumb-item a {
color: #0a58ca;
text-decoration: none;
}
.breadcrumb-item a:hover {
text-decoration: underline;
}
.breadcrumb-item.active {
color: #495057;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;
}
</style>
|