Radial Nav

A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions.

Note: This component is not fully reusable out-of-the-box. Styling, animation, and positioning may need to be modified as per your specific use case, so you won’t find most configurations passed from the parent. I’ve only kept the necessary configuration options that I felt essential.

Feel free to open any issues tagging me @arhamkhnz for feature requests or bug reports related to this component.

Installation

Usage

<RadialNav items={ITEMS} />

API Reference

RadialNav

Prop	Type	Default
`items`	`RadialNavItem[]`	-
`size?`	`number`	`180`
`menuButtonConfig?`	`MenuButtonConfig`	`{ iconSize: 20, buttonSize: 40, buttonPadding: 8 }`
`defaultActiveId?`	`number`	`null`
`onActiveChange?`	`(id: number) => void`	-

Credits

Credits to Azzam for this X post as inspiration