Why choose React-Planet for circular navigation

React-Planet is a focused component for building circular, orbital, or radial menus in React. If your UI needs a compact floating menu, a playful orbital navigation, or an elegant circular UI for touch devices, react-planet provides the positional math and animation scaffolding so you don’t have to reinvent trigonometry at 2 AM.

Compared to building a radial menu from scratch, react-planet abstracts layout, hover/active behavior, and simple transitions while remaining lightweight. It fits well when you want an accessible navigation component that behaves predictably across screen sizes and when animated interactions matter.

Use cases: in-app floating actions, photo galleries with orbital thumbnails, dashboards with circular quick actions, and creative landing pages. If you’re looking for a complete navigation framework, pair it with React Router; if you just want a visually distinct menu, react-planet is ideal.

Installation & getting started (setup)

Getting started with react-planet is straightforward. First, ensure you have a React project (Create React App, Vite, Next.js, etc.). Then install the package from npm:

npm install react-planet
# or
yarn add react-planet

If you prefer a guided walkthrough, follow this community write-up: react-planet tutorial on Dev.to. For the package listing, check the npm page: react-planet installation.

After installing, import the component and render your items. The minimal pattern is to supply children (buttons or links) and a few props for radius, start angle, and animation. Below is a compact example to get your orbital nav visible in seconds.

// App.jsx
import React from 'react';
import Planet from 'react-planet';

export default function App(){
  return (
    <Planet centerContent=<button>Menu</button> orbitRadius={90} open={true}>
      <button onClick={()=> console.log('one')}>One</button>
      <button onClick={()=> console.log('two')}>Two</button>
      <button onClick={()=> console.log('three')}>Three</button>
    </Planet>
  );
}

Building a basic React circular menu (example)

Start from the minimal example above and progressively enhance it. For many applications you’ll want keyboard support, ARIA labels, and predictable open/close behavior. Wrap the center trigger in a button with aria-expanded and tie open state to React state for accessibility.

Here’s a simple controlled pattern with state and keyboard handling. This pattern makes your circular navigation a first-class interactive element for both mouse and keyboard users.

import React, {useState} from 'react';
import Planet from 'react-planet';

function OrbitalMenu(){
  const [open, setOpen] = useState(false);
  return (
    <Planet
      centerContent=<button aria-expanded={open} onClick={()=> setOpen(v=>!v)}>☰</button>
      open={open}
      startAngle={-90}
      orbitRadius={100}
      bounce={true}
    >
      <a href="/profile">Profile</a>
      <a href="/settings">Settings</a>
      <button onClick={()=> alert('logged out')}>Sign out</button>
    </Planet>
  );
}

Adjust startAngle and orbitRadius to control the arc and spread of menu items. The component generally positions children on a circular arc using polar coordinates; you only change the parameters, not the math.

Customization, animations, and performance

Customization points typically include radius, start angle, arc length, transition timing, easing, and item offsets. For animations, rely on CSS transitions for micro-interactions and let react-planet handle layout reflows. If you need complex motion, integrate with a motion library like Framer Motion by wrapping individual items.

For smooth animations on low-power devices, reduce transform/opacity animations and avoid costly layout thrashing. Use will-change or translate3d when necessary. Keep the DOM shallow: the fewer children and nested components, the faster the orbit calculations will render.

Example tweaks: stagger entry animations, add focus rings for keyboard navigation, and use prefers-reduced-motion media queries to respect user motion settings. Small accessibility improvements go a long way toward making a playful UI usable in production.

Best practices and accessibility

Accessibility is not optional. Ensure the center control is a real <button> with aria-expanded and aria-controls pointing to the menu container. Each orbiting item should be focusable (buttons or anchors) and receive a logical tab order. Screen readers benefit from descriptive labels.

Consider focus management: when opening the menu, move focus to the first actionable item or keep it on the trigger with clear instructions. When closing, return focus to the trigger. Use key handlers for Escape to close and Arrow keys to jump between radial items if your interaction model requires it.

Test with keyboard-only navigation, screen readers, and touch devices. Radial menus are visually striking but can be confusing if not labeled or if hit targets are too small — aim for at least 44px touch targets and visible focus indicators.

Quick setup checklist

1. Install: npm install react-planet.
2. Import & render a <Planet> with children.
3. Add accessible attributes (aria-expanded, aria-controls) to the trigger.
4. Tweak orbitRadius, startAngle, and animation props.
5. Test on keyboard, screen readers, and mobile; respect reduced-motion.

When not to use a circular menu

Don’t force an orbit UI if your users need quick, hierarchical navigation or rely on predictable linear lists. Circular menus are best for short action sets (3–8 items) and discovery-style UIs. They are not ideal for dense menus or deep site navigation.

Also, avoid over-animating: a clever menu quickly becomes gimmicky when every click produces a physics simulation. Use subtlety and purpose: animations should clarify, not distract.

If you need multi-level navigation, consider combining a compact radial launcher with a conventional sidebar for deeper exploration.

Useful links & references

Handy resources for deeper reading and package references:

• react-planet tutorial — community walkthrough with screenshots and context.
• react-planet on npm — package and changelog.
• React official docs — fundamentals and best practices for components and accessibility.

FAQ