Design System
Playground Zur Vorlage

Komponenten · NavigationNav-Link

Komponente · 6 Varianten

Nav-Link

components/NavLink.astro

Link im Header: Ruhe, Hover, Active als Haarlinie darunter, Chevron für Menü, Leiste, invers.

Notizen

  • Bestand Header: text-paper/70, Hover text-paper, kein Active, kein Chevron.
  • Liberate: Active als Strich, kein Fond. Kein Pill-Hover.

Props

Name Typ Default Notiz
variant "default" | "hover" | "active" | "chevron" | "leiste" | "invers" "default" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<NavLink variant="default" surface="nacht" />

01 · Default

Vier Links

Header. 70 % Deckung, Hover 100 %.

Nacht

Paper

02 · Hover

Unterstrich

nw-link. Offset 0,35em, 1px.

Nacht

Paper

03 · Active

Haarlinie darunter

Liberate. aria-current=page.

Nacht

Paper

04 · Chevron

Pfeil 12 px

Menü-Panel. aria-expanded schaltet.

Nacht

Paper

05 · Leiste

Tab-Optik in Haarlinie

Feature-Tabs leiste. Active-Kante in fg.

Nacht

Paper

06 · Invers

Auf Gegenfläche

Ebenen. Deckung statt Farbe.

Nacht

Paper