MagneticNav

Navigation

Links, die vom Cursor magnetisch angezogen werden und beim Verlassen zurückfedern — darunter gleitet eine elastische Underline mit Overshoot zwischen den Menüpunkten.

Live Demo

Mit dem Cursor über die Links fahren — sie werden magnetisch angezogen, die Underline folgt elastisch

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`MagneticNavItem[]`	Ja	—	Navigationspunkte {href, label}
`logo`	`ReactNode`	Nein	—	Logo links
`rightContent`	`ReactNode`	Nein	—	Inhalt rechts (z.B. CTA)
`activeHref`	`string`	Nein	—	Aktiver Link — Ruheposition der Underline
`strength`	`number`	Nein	`0.35`	Magnetstärke (0–1)
`color`	`string`	Nein	`'#1f1d1a'`	Textfarbe
`underlineColor`	`string`	Nein	`'#e8590c'`	Farbe der Underline
`backgroundColor`	`string`	Nein	`'#faf6ef'`	Hintergrundfarbe
`renderLink`	`(item, props) => ReactNode`	Nein	—	Custom Link-Renderer
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<MagneticNav
  logo={<strong>Atelier Nord</strong>}
  activeHref="/"
  items={[
    { href: '/', label: 'Start' },
    { href: '/kollektion', label: 'Kollektion' },
    { href: '/atelier', label: 'Atelier' },
    { href: '/kontakt', label: 'Kontakt' },
  ]}
  strength={0.35}
/>