sidebar toc table-of-contents index navigation anchor changelog docs sidebar toc index anchor navigation chapters year month docs changelog table of contents sidebar year month navigation index sticky docs sidebar with anchor links changelog sidebar navigation
Sidebar TOC Index
Fetch pattern JSON:
curl https://webspire.de/patterns/sidebar/toc-index.json toc-index.html
<nav class="ws-sidebar w-52 shrink-0" aria-label="Table of contents">
<div class="sticky top-24 space-y-6">
<!-- Year group: 2026 -->
<div>
<p class="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-sidebar-text-muted)]">2026</p>
<ul class="space-y-0.5 border-l border-[var(--ws-sidebar-border)] pl-3">
<li>
<a href="#march-2026"
class="flex items-center justify-between py-1 text-sm font-medium text-[var(--ws-sidebar-accent)] hover:text-[var(--ws-sidebar-accent)]"
aria-current="page">
March
<span class="rounded-full bg-[var(--ws-sidebar-accent)]/15 px-1.5 py-0.5 text-[10px] font-semibold text-[var(--ws-sidebar-accent)]">3</span>
</a>
</li>
<li>
<a href="#february-2026" class="block py-1 text-sm text-[var(--ws-sidebar-text-soft)] hover:text-[var(--ws-sidebar-text)]">February</a>
</li>
<li>
<a href="#january-2026" class="block py-1 text-sm text-[var(--ws-sidebar-text-soft)] hover:text-[var(--ws-sidebar-text)]">January</a>
</li>
</ul>
</div>
<!-- Year group: 2025 -->
<div>
<p class="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-sidebar-text-muted)]">2025</p>
<ul class="space-y-0.5 border-l border-[var(--ws-sidebar-border)] pl-3">
<li>
<a href="#december-2025" class="block py-1 text-sm text-[var(--ws-sidebar-text-soft)] hover:text-[var(--ws-sidebar-text)]">December</a>
</li>
<li>
<a href="#november-2025" class="block py-1 text-sm text-[var(--ws-sidebar-text-soft)] hover:text-[var(--ws-sidebar-text)]">November</a>
</li>
<li>
<a href="#october-2025" class="block py-1 text-sm text-[var(--ws-sidebar-text-soft)] hover:text-[var(--ws-sidebar-text)]">October</a>
</li>
<li>
<a href="#september-2025" class="block py-1 text-sm text-[var(--ws-sidebar-text-soft)] hover:text-[var(--ws-sidebar-text)]">September</a>
</li>
</ul>
</div>
<!-- Year group: 2024 -->
<div>
<p class="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-sidebar-text-muted)]">2024</p>
<ul class="space-y-0.5 border-l border-[var(--ws-sidebar-border)] pl-3">
<li>
<a href="#q4-2024" class="block py-1 text-sm text-[var(--ws-sidebar-text-soft)] hover:text-[var(--ws-sidebar-text)]">Q4</a>
</li>
<li>
<a href="#q3-2024" class="block py-1 text-sm text-[var(--ws-sidebar-text-soft)] hover:text-[var(--ws-sidebar-text)]">Q3</a>
</li>
</ul>
</div>
<!-- Divider -->
<div class="border-t border-[var(--ws-sidebar-border)]"></div>
<!-- Filter section (optional) -->
<div>
<p class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-sidebar-text-muted)]">Filter</p>
<div class="flex flex-wrap gap-1.5">
<button class="rounded-md border border-[var(--ws-sidebar-border)] px-2 py-0.5 text-[11px] font-medium text-[var(--ws-sidebar-text-soft)] hover:border-[var(--ws-sidebar-accent)] hover:text-[var(--ws-sidebar-accent)] transition">Model</button>
<button class="rounded-md border border-[var(--ws-sidebar-border)] px-2 py-0.5 text-[11px] font-medium text-[var(--ws-sidebar-text-soft)] hover:border-[var(--ws-sidebar-accent)] hover:text-[var(--ws-sidebar-accent)] transition">API</button>
<button class="rounded-md border border-[var(--ws-sidebar-border)] px-2 py-0.5 text-[11px] font-medium text-[var(--ws-sidebar-text-soft)] hover:border-[var(--ws-sidebar-accent)] hover:text-[var(--ws-sidebar-accent)] transition">Docs</button>
</div>
</div>
</div>
</nav>
Details
Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
sidebartoctable-of-contentsindexnavigationanchorchangelogdocs
Slots
| Name | Required | Description |
|---|---|---|
| groups | Yes | Grouped navigation sections (e.g., by year, chapter, or category) with anchor links. |
| filters | No | Optional filter chip row for narrowing visible content. |
Sticky table-of-contents sidebar with grouped anchor links. Groups are labeled with a small uppercase heading (year, chapter, section). Links use a left border-l as a visual track. The active link gets the accent color via aria-current="page". Optional entry-count badge (pill) on each group. Optional filter chip row at the bottom. Designed to pair with changelog/date-feed or any long anchor-indexed page.