Orbit Menu

Responsive radial menu for spatial quick actions

A command menu that launches actions around a central trigger on larger screens and becomes a compact, touch-friendly tray on mobile. It includes roving keyboard focus, typeahead, outside-click dismissal and reduced-motion support.

Preview

No action selected

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/orbit-menu.json

Usage

Import the component:

import { OrbitMenu } from "@/components/rohan/orbit-menu"
import { CalendarPlus, FileText, Link, Upload } from "lucide-react"

Use it in your code:

const actions = [
  { id: "note", label: "New note", icon: <FileText />, shortcut: "N" },
  { id: "event", label: "Add event", icon: <CalendarPlus />, shortcut: "E" },
  { id: "upload", label: "Upload", icon: <Upload />, shortcut: "U" },
  { id: "link", label: "Save link", icon: <Link />, shortcut: "L" },
]

<OrbitMenu
  items={actions}
  menuLabel="Create something"
  onSelect={(action) => runAction(action.id)}
/>

Props

Property	Type	Default	Description
items	OrbitMenuItem[]	—	Actions with an id, label, icon and optional description, shortcut or callback.
menuLabel	string	"Quick actions"	Accessible menu name and the compact tray title.
radius	number	112	Distance from the center trigger to each radial action, in px.
open / defaultOpen	boolean	false	Controlled or initial open state.
onOpenChange	(open: boolean) => void	—	Called whenever the user opens or closes the menu.
onSelect	(item: OrbitMenuItem) => void	—	Called after an enabled action is selected.

Components