Radial Menu

A button whose actions fan out around it. Click one, or press, drag toward it and let go in a single movement.

Try a press and drag

pnpm dlx shadcn@latest add @latheui/radial-menu

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Radial Menu is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native div attributes.

Prop	Type	Default	Description
items* (required)	{ id: string; label: string; icon: ReactNode; disabled?: boolean }[]	—	The actions, clockwise from startAngle.
onSelect	(id: string) => void	—	Called with the chosen action's id.
open	boolean	—	Controlled: whether the actions are out.
defaultOpen	boolean	false	Start with the actions out.
onOpenChange	(open: boolean) => void	—	Called when the menu opens or closes.
label* (required)	string	—	Accessible name for the button and its menu.
children	ReactNode	—	What the button shows. A plus that turns to a cross when open, by default.
radius	number	84	Distance from the button's center to each action's, in px.
itemSize	number	44	Size of each action in px.
startAngle	number	-90	Where the first action sits, in degrees. -90 is straight up.
arc	number	360	Degrees the actions spread across. Less than 360 draws the ring as an arc with rounded ends.
stagger	number	22	Milliseconds between one action appearing and the next.
curve	Curve	snappy spring	How actions fly out. Any curve from the Animation Lab.
duration	number	—	Milliseconds, for curves that are not springs.

The button announces that it opens a menu, and whether it is open. The actions are menu items named by their labels.
Every action can be reached by clicking or with the keyboard; the drag is a shortcut, not the only way.
A press outside closes the menu.
With reduced motion actions appear in place, without flying out.

Actions fly out from the button on a snappy spring, 22ms apart, while the ring behind them grows and turns into place.
One highlight rides the ring and turns, the short way round, to the hovered or aimed action. During a drag it follows the pointer's direction once the pointer is 26px from the center.

<RadialMenu label="React" items={reactions} startAngle={-180} arc={180} radius={96} />

API reference

Also accepts native div attributes.

Prop	Type	Default	Description
items* (required)	{ id: string; label: string; icon: ReactNode; disabled?: boolean }[]	—	The actions, clockwise from startAngle.
onSelect	(id: string) => void	—	Called with the chosen action's id.
open	boolean	—	Controlled: whether the actions are out.
defaultOpen	boolean	false	Start with the actions out.
onOpenChange	(open: boolean) => void	—	Called when the menu opens or closes.
label* (required)	string	—	Accessible name for the button and its menu.
children	ReactNode	—	What the button shows. A plus that turns to a cross when open, by default.
radius	number	84	Distance from the button's center to each action's, in px.
itemSize	number	44	Size of each action in px.
startAngle	number	-90	Where the first action sits, in degrees. -90 is straight up.
arc	number	360	Degrees the actions spread across. Less than 360 draws the ring as an arc with rounded ends.
stagger	number	22	Milliseconds between one action appearing and the next.
curve	Curve	snappy spring	How actions fly out. Any curve from the Animation Lab.
duration	number	—	Milliseconds, for curves that are not springs.

Accessibility

The button announces that it opens a menu, and whether it is open. The actions are menu items named by their labels.
Every action can be reached by clicking or with the keyboard; the drag is a shortcut, not the only way.
A press outside closes the menu.
With reduced motion actions appear in place, without flying out.

Motion

Actions fly out from the button on a snappy spring, 22ms apart, while the ring behind them grows and turns into place.
One highlight rides the ring and turns, the short way round, to the hovered or aimed action. During a drag it follows the pointer's direction once the pointer is 26px from the center.