Radial Menu React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import RadialMenu from "./RadialMenu";

export default function Example() {
  return (
    <RadialMenu
      items={[
        {
          "id": "create",
          "label": "Create",
          "icon": "+"
        },
        {
          "id": "share",
          "label": "Share",
          "icon": "↗"
        },
        {
          "id": "save",
          "label": "Save",
          "icon": "◇"
        },
        {
          "id": "edit",
          "label": "Edit",
          "icon": "⌘"
        }
      ]}
      defaultOpen={true}
      radius={86}
      startAngle={-90}
      sweepAngle={360}
      buttonSize={46}
      accentColor={"#e1d1f3"}
      itemBackground={"#2c2635"}
    />
  );
}

Using Radial Menu

Supply labelled actions through items and choose a radius that leaves room around the trigger. startAngle and sweepAngle define the fan's direction.

Use open and onOpenChange for external state, and onSelect to handle actions. Keep the accessible label meaningful when the trigger contains only an icon.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { id, label, icon? }. Icons can be React nodes. Empty arrays render nothing.
open	boolean	No	undefined	Optional controlled expanded state.
defaultOpen	boolean	No	false	Initial expanded state when uncontrolled.
onOpenChange	function	No	undefined	Called with the requested expanded state.
onSelect	function	No	undefined	Called with (item, index) when an action is selected.
radius	number	No	90	Distance from the trigger to each action in pixels.
startAngle	string	No	-90	Angle of the first action in degrees.
sweepAngle	number	No	360	Arc covered by the actions. 360 distributes them around a full circle.
buttonSize	number	No	48	Diameter of each button in pixels.
accentColor	string	No	"#e1d1f3"	Central trigger colour.
itemBackground	string	No	"#2c2635"	Action button background colour.
label	string	No	"Toggle actions"	Accessible trigger label.
triggerIcon	ReactNode	No	undefined	Optional React node for the trigger icon.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.