Radial Menu

Plus trigger fans sketch actions in an arc.

Roughness1.5Lock seedSizeRadius88.0Animate

<RadialMenu size="md" radius={88} items={[/* ... */]} roughness={1.5} />

CLI install

npx doodleui-react add radial-menu

Usage

import { RadialMenu } from "doodleui-react";

<RadialMenu
  aria-label="Tools"
  items={[
    { id: "crop", icon: <span>#</span>, label: "Crop" },
    { id: "text", icon: <span>T</span>, label: "Text" },
  ]}
/>

Click the central trigger to open and close the menu. Item onSelect runs your handler but leaves the menu open until you toggle the trigger again.

Props

Prop	Type	Default	Notes
items	RadialMenuItem[]	—	Actions with id, icon, label, optional onSelect / disabled.
open / defaultOpen / onOpenChange	boolean / (open) => void	uncontrolled false	Controlled or uncontrolled open state. Toggle via trigger only.
radius	number	size preset	Distance in px from trigger center to item centers.
size	"sm" \| "md" \| "lg"	"md"	Trigger and item diameter preset.
aria-label	string	"Open menu"	Accessible name for the central trigger button.
animate / SketchProps	boolean / SketchProps	provider / theme	Draw-in, roughness, seed, sketchColor, and related sketch props.