spatial

Orbit Menu

A practical configurable arc of actions around a central trigger.

spatial
menu
radial
actions

Quick usage

usage

import { OrbitMenu } from "@pinky-ui/experiences";

<OrbitMenu items={actions} startAngle={-165} endAngle={-15} />

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

disabled={true}

Install

Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/experiences

shell

pnpm add @pinky-ui/experiences

shell

yarn add @pinky-ui/experiences

shell — copies source into your project

npx pinky-ui add orbit-menu

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
items	OrbitMenuItem[]	—	Two to five labeled links or actions in logical order.
className	string	—	Styles the outer composition without changing its behaviour.
disabled	boolean	false	Uses the static, readable composition.

Accessibility

Logical DOM order supports Arrow keys, Home, End and Escape.
Opening focuses the first item; closing restores trigger focus.

Performance

A small item cap is recommended and movement is transform-only.
Mobile and reduced motion switch to a linear layout.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

Compact related creative-tool actions

When not to use

Primary navigation, dense menus or unlabeled destructive actions

Skill

Purpose

OrbitMenu expands a small set of related actions around a central trigger. Use it for contextual creative tools, map/media controls or compact action clusters with two to five choices.

Prefer a partial arc and a radius near 90–130px. Avoid primary site navigation, destructive actions without labels, crowded mobile corners or a full ring that obscures content. Icons never replace accessible text.

Items stay in logical DOM order and support Arrow keys, Home/End, Escape and focus restoration. Touch, mobile and reduced motion receive a compact linear fallback. Keep callbacks lightweight and never add a second radial menu nearby.

Open this skill on its own page