IslandNav

Navigation

Schwebende Glas-Kapsel im Dynamic-Island-Stil: schrumpft beim Herunterscrollen zur kompakten Insel und dehnt sich beim Hochscrollen federnd aus. Ein Pill-Indikator gleitet elastisch zwischen den Links.

Live Demo

Start — runterscrollen: Insel schrumpft, hochscrollen: dehnt sich aus

Leistungen — runterscrollen: Insel schrumpft, hochscrollen: dehnt sich aus

Projekte — runterscrollen: Insel schrumpft, hochscrollen: dehnt sich aus

Kontakt — runterscrollen: Insel schrumpft, hochscrollen: dehnt sich aus

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`IslandNavItem[]`	Ja	—	Navigationspunkte {href, label}
`logo`	`ReactNode`	Nein	—	Logo (Emoji oder ReactNode)
`activeHref`	`string`	Nein	—	Aktiver Link (href)
`position`	`'fixed' \| 'sticky' \| 'static'`	Nein	`'fixed'`	Positionierung
`accentColor`	`string`	Nein	`'#a3e635'`	Akzentfarbe
`background`	`string`	Nein	—	Hintergrund der Insel (rgba empfohlen)
`shrinkOnScroll`	`boolean`	Nein	`true`	Beim Scrollen schrumpfen
`renderLink`	`(item, props) => ReactNode`	Nein	—	Custom Link-Renderer
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<IslandNav
  logo="🌊"
  activeHref="/"
  items={[
    { href: '/', label: 'Start' },
    { href: '/leistungen', label: 'Leistungen' },
    { href: '/projekte', label: 'Projekte' },
    { href: '/kontakt', label: 'Kontakt' },
  ]}
  accentColor="#a3e635"
/>