Design System
Playground Zur Vorlage

Komponenten · NavigationSeitennav

Komponente · 6 Varianten

Seitennav

components/Seitennav.astro

Seitliche Navigation für Docs, Blog-Kategorien und Inhaltsverzeichnis. Active in fg, Rest gedimmt, optional Kante links.

Notizen

  • Bestand: Docs-Sidebar ist Werkzeug mit Alpine, kein System-Teil.
  • Liberate: kleine Wörter, viel Luft. Zähler in Mono für Blog.

Props

Name Typ Default Notiz
variant "docs" | "blog" | "toc" | "gruppen" | "kante" | "sticky" "docs" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<Seitennav variant="docs" surface="nacht" />

01 · Docs

Gruppen mit Label

System-Sidebar. Ohne Kante.

Nacht

Paper

02 · Blog

Kategorien mit Zahl

Blog-Card. Mono-Zähler rechts.

Nacht

Paper

03 · TOC

Auf dieser Seite

Artikel. aria-current=location.

Nacht

Paper

04 · Gruppen

Kante links pro Gruppe

Tabs vertikal. Active-Kante in fg.

Nacht

Paper

05 · Kante

TOC mit Kante

03 + 04. Scroll-Spy später.

Nacht

Paper

06 · Sticky

Klebt bei top-24

Split-Sektionen. lg:sticky.

Nacht

Paper