WaterNav

Navigation

Navigation mit animierter Wasser-Spiegelung unter den Links. Bei Hover erscheint unter dem Text eine leicht wabernde Spiegelung — wie ein Schriftzug, der sich in einer Wasseroberfläche spiegelt. Inkl. Priority-Overflow ins Burger-Menü.

Live Demo

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`WaterNavItem[]`	Ja	—	Array mit {href, label} für die Menüpunkte
`logo`	`WaterNavLogo`	Nein	—	Logo-Konfiguration: {src, alt, href?, height?, glow?}
`backgroundColor`	`string`	Nein	`'#0077B6'`	Hintergrundfarbe der Top-Bar
`burgerMenuColor`	`string`	Nein	`'#005F8E'`	Hintergrundfarbe des Burger-Dropdowns
`fontFamily`	`string`	Nein	`'inherit'`	Schriftfamilie für Nav-Items
`fontSize`	`string`	Nein	`'0.9rem'`	Schriftgröße der Nav-Items
`rightContent`	`ReactNode`	Nein	—	Inhalt im rechten Bereich (z.B. Sprachschalter, Cart, CTA)
`burgerExtra`	`ReactNode`	Nein	—	Zusätzlicher Inhalt im Burger-Dropdown
`renderLink`	`(item, props) => ReactNode`	Nein	—	Custom Link-Renderer (z.B. für Next.js Link)
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<WaterNav
  logo={{ src: '/images/logo.png', alt: 'Badeparadies', height: 150, glow: true }}
  items={[
    { href: '/', label: 'Startseite' },
    { href: '/bad', label: 'Bad' },
    { href: '/saunawelt', label: 'Saunawelt' },
    { href: '/restaurant', label: 'Restaurant' },
    { href: '/preise', label: 'Preise' },
    { href: '/kontakt', label: 'Kontakt' },
  ]}
  backgroundColor="#0077B6"
  burgerMenuColor="#005F8E"
  rightContent={
    <a href="tel:+4963919234211" style={{ background: '#E67E22', color: 'white', padding: '0.5rem 1.25rem', borderRadius: 6, textDecoration: 'none', fontWeight: 700 }}>
      Anrufen
    </a>
  }
/>