Radial Orbit Menu: React + Tailwind Component

A center button that expands into a radial menu arranged in orbit, popping out one item at a time.

Click the central FAB and the child items spring out one by one along an arc with their angles spread evenly; click again and they retract in reverse. Child items show an outward-facing label on mouse hover or keyboard focus, and radius, arc, and startAngle let you customize the orbit radius and the arc of expansion — a good fit for mobile quick actions or dashboard tool entry points.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/radial-orbit-menu.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Orbit radiusradius

Expand arcarc

360

Start anglestartAngle

Pop interval (s)stagger

0.05

Collapse after selectingcloseOnSelect

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<RadialOrbitMenu/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/radial-orbit-menu.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/radial-orbit-menu.

Usage

import { RadialOrbitMenu } from "@/components/ui/radial-orbit-menu";
import { Calendar, Mail, Search } from "lucide-react";

<RadialOrbitMenu
  radius={96}
  items={[
    { icon: <Mail />, label: "Compose email", onClick: () => console.log("mail") },
    { icon: <Calendar />, label: "New event" },
    { icon: <Search />, label: "Search" },
  ]}
/>

To expand across the upper arc only, set arc and startAngle:

<RadialOrbitMenu items={items} radius={110} arc={180} startAngle={0} />

Props

Prop	Type	Default	Description
`items`	`RadialOrbitMenuItem[]`	—	The child item list; each has `icon`, `label`, and `onClick?` (click callback)
`radius`	`number`	`96`	Distance from a child item's center to the main button's center (px)
`arc`	`number`	`360`	The arc range of expansion (degrees); `360` is a full circle, and below 360 the first and last items sit at the two endpoints
`startAngle`	`number`	`90`	Starting angle of the first child item (degrees); `0` is straight right and `90` is straight up, increasing counterclockwise
`stagger`	`number`	`0.05`	Interval between child items popping out (seconds)
`defaultOpen`	`boolean`	`false`	Whether it starts expanded (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the expanded state changes
`closeOnSelect`	`boolean`	`true`	Whether clicking a child item collapses the menu automatically
`triggerLabel`	`string`	`"Open quick menu"`	Accessible label for the main button
`className`	`string`	—	Forwarded to the outermost container

Accessibility

The main button carries aria-expanded and an aria-label, so the expanded state is visible to assistive technology
Every child item is a native button with an aria-label, and the label also shows when focused with keyboard Tab
Pressing Escape collapses the menu and focus returns to the trigger; clicking outside the menu also collapses it
When the user has "reduce motion" enabled at the system level, the child items simply fade in and out in place with no bouncing displacement or rotation

Radial Orbit Menu