Radial Nav
Circular navigation with an arrow that turns to the section. Pro · Animated components › Radial menus
Navigation laid out on a circle — a HUD, a class or role picker. A needle in the hub turns the short way round to the chosen section on a spring and the chosen button unfolds its caption. Arrow keys move between sections, Home / End jump to the ends, Enter / Space chooses; the choice is aria-current.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add radial-navnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { RadialNav } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
items * | readonly RadialNavItem[] | Sections around the circle, clockwise from the top. | |
value | string | null | Id of the chosen section (null: none). | |
defaultValue | string | null | null | Initial value when uncontrolled. |
onValueChange | (id: string | null) => void | Called with the new value when it changes. | |
size | number | 180 | Diameter of the circle the buttons sit on, px (default 180). |
buttonSize | number | 44 | Diameter of each button, px (default 44). |
center | ReactNode | Content of the hub in the middle (an emblem, the current section's icon). | |
activation | 'manual' | 'automatic' | 'manual' | manual (default): arrow keys move focus and Enter / Space opens the section, so passing over a section does not navigate to it. automatic: the focused section is chosen at once (for a local switcher). |
labels | Partial<RadialNavLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Radial Menu — Ring-shaped context menu on right-click
- Radial Intro — Items fly out from the center and orbit
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
- Pin List — Pinnable list: items glide between groups
- Notification Stack — Notification stack that expands into a list
Previous: Radial Menu · Next: Radial Intro · All Animated components