Orbit menuPro
Hold a button and its actions orbit out, ready to pick with a drag.
Live · keyboard ready
- Three to six quick actions on one object, such as a note or photo.
- Touch-first surfaces where press, drag, and release should fire an action in one gesture.
- Use dropdown-menu or context-menu for longer or text-heavy lists.
- Use dock for tools that stay selected.
- Use action-button for a single action.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { OrbitMenu } from "@/registry/components/orbit-menu/orbit-menu";import { Pin, Share2, Trash2 } from "lucide-react"; export function NoteActions({ onAction }: { onAction: (id: string) => void }) { return ( <OrbitMenu label="Note actions" onAction={onAction} actions={[ { id: "pin", label: "Pin", icon: <Pin size={18} />, done: "Pinned" }, { id: "share", label: "Share", icon: <Share2 size={18} /> }, { id: "delete", label: "Delete", icon: <Trash2 size={18} />, tone: "danger" }, ]} /> );}OrbitMenu
A round button that bursts into an arc of actions. Press, drag onto an action, and release to fire it, or tap to keep the arc open and tap again to close it.
PropTypeDefaultDescription
actionsRequired{ id: string; label: string; icon: ReactNode; done?: string; tone?: "neutral" | "danger" }[]–Three to six actions. done is the short confirmation shown after firing and defaults to the label.onActionRequired(id: string) => void–Called with the fired action's id.labelstring"Actions"Accessible name of the button and menu, also shown while the arc is open and nothing is targeted.radiusnumber104Distance from the button center to each action, in px.spreadnumber150Degrees the arc spans.directionnumber-90Degrees the arc opens toward: -90 up, 0 right, 90 down, 180 left.disabledbooleanfalseDisables the trigger and closes the arc.announcebooleantrueAnnounces confirmations in a polite status region.onOpenChange(open: boolean) => void–Called when the arc opens or closes.classNamestring–Class on the root element.- Arrow keys
- On the trigger, open the arc and focus the first action (Arrow Up focuses the last). On an action, move around the arc.
- HomeorEnd
- Focus the first or last action.
- EnterorSpace
- Fire the focused action. On the trigger, open the arc and focus the first action, or close it if open.
- Escape
- Close the arc and return focus to the trigger.
- Tab
- Close the arc and move on.
- The trigger has aria-haspopup="menu", aria-expanded, and aria-controls; actions are role="menuitem" buttons named by their label.
- The closed menu is inert, and a roving tabindex keeps one action in the tab order.
- Confirmations such as "Pinned" are read from a role="status" region when announce is on.
- Actions swirl out along the arc in reading order and fold back in reverse; a lens glides between targeted actions and nearby actions lean toward the pointer.
- The trigger glyph morphs between ellipsis, close, and check, and a label pill springs to fit its text. It names the targeted action, shows Release to cancel when a drag leaves the arc, and shows the done text for about 1.4 seconds after firing.
- Targeting goes by angle, like a pie menu: the pointer only has to head toward an action, outside a 34px dead zone around the trigger. Releasing off the arc, or a hold without a drag, folds it away without firing.
- Reduced motion drops the swirl, blur, and magnet pull, leaving short fades and instant position changes.
- The arc is 104px from the trigger by default and is not clamped to the viewport; set direction and radius so it opens into free space.
- Trigger and actions use touch-action none so drag-to-select works on touch; pointer magnet effects skip touch.
- The open trigger and the label pill use backdrop blur, removed under prefers-reduced-transparency. Actions use a near solid material, so six moving items never stack blurs.
- The closed menu stays mounted but inert; with six actions the cost is small.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for three to six quick actions on one object (a note, a photo) where a dropdown is too heavy and a toolbar too loud. Use dropdown-menu or context-menu for longer or text-heavy lists.
- Give each action a done string for the confirmation pill, mark destructive actions tone="danger", and set direction so the arc opens into free space.
The full library index for assistants is at /llms.txt.