CircleMenu

Navigation

Fullscreen-Menü, das als wachsender Kreis exakt aus der Trigger-Position expandiert (animierter clip-path: circle()) und beim Schließen dorthin zurück kollabiert. Links staggern herein.

Live Demo

Klick auf den Button — der Kreis wächst aus dem Button heraus:

Schließen: X oben rechts oder Escape

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`CircleMenuItem[]`	Ja	—	Menüpunkte {href, label}
`background`	`string`	Nein	—	Hintergrund des Kreis-Overlays (Gradient)
`accentColor`	`string`	Nein	`'#fde047'`	Akzentfarbe (Trigger, Hover)
`color`	`string`	Nein	`'#ffffff'`	Textfarbe der Links
`footer`	`ReactNode`	Nein	—	Inhalt unten im Overlay
`renderLink`	`(item, props) => ReactNode`	Nein	—	Custom Link-Renderer
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse für den Trigger

Code-Beispiel

<CircleMenu
  items={[
    { href: '/', label: 'Startseite' },
    { href: '/angebot', label: 'Angebot' },
    { href: '/galerie', label: 'Galerie' },
    { href: '/kontakt', label: 'Kontakt' },
  ]}
  background="linear-gradient(150deg, #6d28d9, #be185d)"
  footer={<p>[email protected]</p>}
/>