Navigation
Orbit Ring Nav
Orbit Ring Nav: A circular ring of navigation buttons with a rotating pointer that snaps to the active item and buttons that expand into labeled pills on hover.
Using Orbit Ring Nav
Orbit Ring Nav uses the card preview frame with a dark theme setting.
Customize the preview
These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.
| Control | Type | Default | Preview limits |
|---|---|---|---|
size | number | 260 | From 200 to 340; step 20 |
accentColor | color | #38BDF8 | No additional limit in the metadata. |
pointerStiffness | number | 220 | From 100 to 360; step 20 |
expandLabels | boolean | true | No additional limit in the metadata. |
Which frameworks are available for Orbit Ring Nav?
Orbit Ring Nav is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.
What does Orbit Ring Nav depend on?
The React metadata lists these npm dependencies beyond React: motion.
What accessibility details are visible in Orbit Ring Nav?
The React source for Orbit Ring Nav includes: native elements (nav); attributes and handlers (aria-current, aria-hidden, aria-label, aria-live). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.
How does Orbit Ring Nav handle reduced motion?
Orbit Ring Nav reads the motion preference in its React source through useReducedMotion(). Preference-dependent expressions in index.tsx: duration: reduceMotion ? 0 : 0.18; duration: reduceMotion ? 0 : 0.24; duration: reduceMotion ? 0.1 : 0.2. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.
