Radial Menu
Ring-shaped context menu on right-click. Pro · Animated components › Radial menus
A context menu laid out as a ring around the pointer — game style: «Equip / Sell / Compare / Move». It springs open around the point you right-clicked (or the area's centre from the keyboard); point at a slice or use the arrow keys, then click or press Enter. Escape, Tab and a click outside close it and hand focus back.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add radial-menunpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { RadialMenu } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
children * | ReactNode | The area the menu belongs to: right-click, a long press (touch), Shift+F10 or the ContextMenu key inside it opens the ring. | |
items * | readonly RadialMenuItem[] | Commands around the ring, clockwise from the top. | |
onSelect | (item: RadialMenuItem) => void | Called with the picked command after the ring closes. | |
open | boolean | Controlled open; use with onOpenChange. | |
defaultOpen | boolean | false | Initial open when uncontrolled. |
onOpenChange | (open: boolean) => void | Called with the new open when it changes. | |
size | number | 240 | Outer diameter of the ring, px (default 240). |
bandWidth | number | 56 | Width of the band the commands sit on, px (default 56). |
disabled | boolean | false | Ignore the opening gestures and keys (the browser's own context menu appears). |
labels | Partial<RadialMenuLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Radial Nav — Circular navigation with an arrow that turns to the section
- 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: Presence Avatars · Next: Radial Nav · All Animated components