DotNav

Navigation

Vertikale Punkt-Navigation am Seitenrand mit IntersectionObserver-Scrollspy: Der aktive Punkt wächst mit Ring, Labels gleiten bei Hover heraus, Klick scrollt sanft zum Abschnitt. Der Onepager-Klassiker.

Live Demo

Start

Angebot

Galerie

Kontakt

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`sections`	`DotNavSection[]`	Ja	—	Abschnitte {id, label} in Seitenreihenfolge
`accentColor`	`string`	Nein	`'#0ea5e9'`	Farbe des aktiven Punkts
`dotColor`	`string`	Nein	—	Farbe inaktiver Punkte
`side`	`'left' \| 'right'`	Nein	`'right'`	Seite
`position`	`'fixed' \| 'absolute'`	Nein	`'fixed'`	Fixed im Viewport oder absolute im Container
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<DotNav
  sections={[
    { id: 'hero', label: 'Start' },
    { id: 'angebot', label: 'Angebot' },
    { id: 'galerie', label: 'Galerie' },
    { id: 'kontakt', label: 'Kontakt' },
  ]}
  accentColor="#0ea5e9"
/>