Overview
The RadialMenu is a highly interactive, space-saving navigation pattern. When activated, menu items expand outwards along a circular path using physics-based spring animations. By tweaking the startAngle and endAngle, you can create full circles (0 to 360), semi-circles (-90 to 90), or quarter-circles (0 to 90) perfect for corner placement.
Installation
npm install framer-motion lucide-react
Usage
import { RadialMenu } from "@/components/creative/radial-menu"
import { Home, User, Settings } from "lucide-react"
export default function MyMenu() {
const items = [
{ id: "1", label: "Home", icon: <Home className="w-5 h-5" /> },
{ id: "2", label: "Profile", icon: <User className="w-5 h-5" /> },
{ id: "3", label: "Settings", icon: <Settings className="w-5 h-5" /> },
]
return (
<RadialMenu
items={items}
radius={120}
startAngle={0}
endAngle={360}
/>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { RadialMenu } from "@/components/creative/radial-menu";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { RadialMenu } from "@/components/creative/radial-menu";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<RadialMenu
items{/* value */}
centerIcon{/* value */}
activeIcon{/* value */}
/>
</div>
);
}