Radial Nav

Круговая навигация со стрелкой, поворачивающейся к разделу. Pro · Анимированные компоненты › Круговые меню

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add radial-nav

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { RadialNav } from 'valyro-ui-pro';

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.