29 lines
1.8 KiB
Plaintext
29 lines
1.8 KiB
Plaintext
---
|
|
type Item = { label: string; href?: string };
|
|
const { items } = Astro.props as { items: Item[] };
|
|
---
|
|
|
|
<nav class="atlas-breadcrumbs content-grid" aria-label="Навигационная цепочка">
|
|
<ol>
|
|
{items.map((item, index) => <li>
|
|
<span class="atlas-breadcrumbs__knot" aria-hidden="true"></span>
|
|
{item.href ? <a href={item.href}>{item.label}</a> : <span aria-current="page">{item.label}</span>}
|
|
{index < items.length - 1 && <span class="atlas-breadcrumbs__line" aria-hidden="true"></span>}
|
|
</li>)}
|
|
</ol>
|
|
</nav>
|
|
|
|
<style>
|
|
.atlas-breadcrumbs { padding-top: 34px; }
|
|
ol { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
|
|
ol::-webkit-scrollbar { display: none; }
|
|
li { display: flex; align-items: center; flex: 0 0 auto; color: var(--text-muted); font-size: 12px; }
|
|
a, li > span[aria-current] { padding: 8px 9px; color: inherit; text-decoration: none; white-space: nowrap; }
|
|
a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }
|
|
li > span[aria-current] { color: var(--text-primary); font-weight: 750; }
|
|
.atlas-breadcrumbs__knot { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--paper); }
|
|
li:last-child .atlas-breadcrumbs__knot { border-color: var(--accent-muted); background: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb,var(--lime) 18%,transparent); }
|
|
.atlas-breadcrumbs__line { width: clamp(18px, 3vw, 42px); height: 1px; background: repeating-linear-gradient(90deg,var(--border-strong) 0 5px,transparent 5px 8px); }
|
|
@media (max-width: 720px) { .atlas-breadcrumbs { width: calc(100% - 28px); padding-top: 22px; } a, li > span[aria-current] { padding-inline: 7px; } }
|
|
</style>
|