RadialMenu

Navigation

Floating-Action-Button, der seine Aktionen kreisförmig auffächert: Items federn mit Stagger an ihre trigonometrisch berechnete Position, das Plus rotiert zum X, Tooltips über den Items.

Live Demo

Klick auf den Button unten — die Aktionen fächern auf

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`RadialMenuItem[]`	Ja	—	Aktionen {icon, label, href?, onClick?} (3–6 empfohlen)
`radius`	`number`	Nein	`110`	Radius des Fächers in Pixeln
`startAngle`	`number`	Nein	`195`	Startwinkel in Grad (270 = oben)
`endAngle`	`number`	Nein	`345`	Endwinkel in Grad
`accentColor`	`string`	Nein	`'#e8590c'`	Farbe des Haupt-Buttons
`itemColor`	`string`	Nein	`'#1c2230'`	Farbe der Item-Buttons
`size`	`number`	Nein	`60`	Größe des Haupt-Buttons
`itemSize`	`number`	Nein	`46`	Größe der Item-Buttons
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<RadialMenu
  items={[
    { icon: '📞', label: 'Anrufen', href: 'tel:+49123456' },
    { icon: '✉️', label: 'E-Mail', href: 'mailto:[email protected]' },
    { icon: '🗓️', label: 'Reservieren', onClick: ()=> openBooking() },
    { icon: '📍', label: 'Anfahrt', href: '/anfahrt' },
  ]}
  radius={110}
/>