React-Planet: Build Circular Navigation Menus in React

Why choose react-planet for circular navigation?

React-Planet is a focused React navigation component that renders items along a circular orbit—perfect for floating menus, orbital navigation patterns, and unique UI affordances. It wraps the geometry, positioning, and basic animation concerns so you can concentrate on UX and content.

For teams aiming to add a distinctive circular UI—like a radial toolbar or floating planet menu—react-planet offers predictable positions, radius controls, and hooks-friendly props. It plays well with React's composition model and can be enhanced with animation libraries.

Because react-planet centralizes layout logic, it simplifies responsive behavior: you can compute radii based on container size, fade or collapse the menu at small breakpoints, and wire keyboard navigation to the orbit positions without rewriting trigonometry.

Install and get started (setup & example)

Start by installing the package. From your project root run:

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

Then import and add a minimal planet menu to your component. This example shows a 6-item circular menu with basic labels and links. Place this inside a React component so sizing and layout can be derived from parent styles.

import React from 'react';
import ReactPlanet from 'react-planet';
export default function PlanetMenu(){
  const items = [
    {id: 'home', content: 'Home', href: '/'},
    {id: 'search', content: 'Search', href: '/search'},
    {id: 'blog', content: 'Blog', href: '/blog'},
    {id: 'about', content: 'About', href: '/about'},
    {id: 'settings', content: 'Settings', href: '/settings'},
    {id: 'help', content: 'Help', href: '/help'},
  ];
  return (
    <ReactPlanet items={items} radius={120} startAngle={-90} />
  );
}

This gets you a functioning circular navigation menu instantly. For a walkthrough-style tutorial, see this react-planet tutorial on DEV: react-planet tutorial.

Core props, layout decisions, and quick patterns

Primary props you'll encounter: items (array), radius (px), startAngle (deg), rotation, itemSize, and onItemClick. These control placement around a central point and basic interactive callbacks. Use radius to tune spacing and startAngle to rotate the orbit.

Decide whether the center node is interactive: many designs use a central toggler (a floating FAB) to open and close the orbit. You can compose that central control with state that toggles item visibility, animating scale and opacity for entry/exit.

To handle responsiveness, calculate radius from container width: smaller screens get a smaller radius and possibly fewer visible items. That approach preserves touch targets and prevents overlap—compute itemSize dynamically and set min/max values by breakpoint.

• items: [{id, content, href, onClick}]
• radius: number (px)
• startAngle: degrees (0 = right, 90 = down)

Customizing animations and advanced styling

react-planet exposes enough hooks and props to control motion. Use built-in spring or duration props if available; otherwise wrap item nodes with Framer Motion or React Spring to orchestrate staggered entry, easing, and rotation. This yields smoother animations than pure CSS for complex sequences.

For orbital rotation, animate the planet's angle prop or container transform. A subtle rotation on hover gives a sense of physics—combine with shadow and scale transforms on items to emphasize depth. Avoid excessive motion that can cause vertigo or motion-sickness.

CSS variables work well for theming: declare –planet-radius, –planet-item-size, and –planet-gap and use them in your stylesheet so design system tokens can change the look without touching component logic. For granular control, each item can accept a style prop for color and icon placement.

/* Example CSS variables */
:root {
  --planet-radius: 120px;
  --planet-item-size: 44px;
  --planet-gap: 8px;
}

Accessibility, keyboard navigation, and mobile UX

Accessible circular menus require ARIA and keyboard support. Mark the container role as menu (role="menu") and items as menuitem (role="menuitem"). Manage focus: when the menu opens, move focus to the first actionable item and trap focus within the menu if it's modal.

Provide predictable keyboard behavior: ArrowRight/ArrowLeft should move focus around the orbit; Home/End jump to first/last; Escape should close the menu and return focus to the toggler. For screen readers, include meaningful labels and aria-expanded on the toggler.

On mobile, prefer touch-friendly hit areas (>=44px). Consider collapsing the orbit into a linear drawer or grid at very small widths to avoid cramped touch targets. Use media queries or JS breakpoints to alter rendering mode for better usability.

Advanced patterns, composition, and integration

Combine react-planet with route-aware navigation: when a route changes, highlight the corresponding orbital item. Use React Router's useLocation hook to match hrefs and apply active styles. This ties circular navigation into app-level state cleanly.

For performance, memoize item arrays and avoid inline functions that force re-renders. If items contain heavy children (images, charts), lazy-load content or render placeholders until visible. The orbital layout math is cheap, but DOM updates for many animated items can be taxing on low-end devices.

Finally, export the component as a small wrapper that standardizes props for your design system—this makes the react-planet menu a drop-in shared component across screens and products, maintaining consistent behavior and analytics events.

Example: toggleable floating planet with route-aware highlighting

This pattern presents a central toggle (FAB) that opens the orbit and syncs with current route. The toggler controls a boolean isOpen; items animate from center outwards on open and reverse on close. Clicking an item navigates and closes the menu.

function FloatingPlanet({items}) {
  const [open, setOpen] = React.useState(false);
  const toggle = ()=>setOpen(v=>!v);
  return (
    <div className="planet-wrapper">
      <button aria-expanded={open} onClick={toggle}>☉</button>
      <ReactPlanet items={items} open={open} radius={open?140:0} />
    </div>
  );
}

Keep the toggler reachable by keyboard and provide aria-controls pointing to the planet container. Use transitionDuration to coordinate the toggler rotation with the orbit expansion for a fluid micro-interaction.

Deployment, performance, and SEO considerations

Circular menus are primarily client-rendered UI; they don't affect server-side SEO for navigational links if those links are essential to crawlability. If navigation needs to be SEO-critical, render a fallback linear nav in the DOM for crawlers and users with JS disabled.

Minimize bundle impact by code-splitting non-essential icons and heavy assets; load react-planet only on pages that use it. Monitor paint and interaction timings—idle animations or large transforms can cost frame drops on older devices.

Use semantic links with rel attributes where appropriate (rel="noopener noreferrer" for external links) and ensure analytics events do not block navigation by being asynchronous. These small optimizations keep circular navigation delightful and performant.

Useful links and references

Official tutorial and examples: react-planet tutorial.

Install & package info: react-planet on npm.

React docs for composition patterns: React official documentation.