Circular Navigation
An interactive circular menu for seamless navigation throughout your application.
Installation
Install this component and its dependencies with a single command.
npx shadcn@latest add https://ui.voxletstudio.com//r/circular-navigation.jsonOnce your project registers the @voxlet namespace, this also works: npx shadcn@latest add @voxlet/circular-navigation
Props
CircularNavigationProps
| Prop | Type | Default | Description |
|---|---|---|---|
| navItems | NavItem[] | [] | An array of navigation items, each containing a name, icon, and href. |
| isOpen | boolean | false | Controls whether the circular navigation menu is open or closed. |
| toggleMenu | () => void | undefined | Function to toggle the menu's open/close state. |
NavItem
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | '' | The display name of the navigation item. |
| icon | React.ComponentType<{ className?: string }> | undefined | The icon component for the navigation item. |
| href | string | '' | The URL link for the navigation item. |