Build an Epic React Radial Menu in 5 Mins [My Lib 2025]

npm install react-orbit-menu

That's it. You're ready to roll.

Building Your First Radial Menu (The 5-Minute Challenge)

Alright, let's start the timer. We're going to add a floating action button (FAB) that, when clicked, opens a beautiful radial menu with several options.

Step 1: Create Your Component

In your React app, create a new component file. Let's call it ActionMenu.jsx. We'll assume you have a library like react-icons for the icons, but you can use any SVG or component.

Step 2: Import and Implement

Now for the magic. We'll import the main components and piece them together. It's incredibly declarative.

// src/components/ActionMenu.jsx
import React from 'react';
import { OrbitMenu, OrbitMenuItem, OrbitMenuTrigger } from 'react-orbit-menu';
import { FaPlus, FaHome, FaCog, FaUser, FaBell } from 'react-icons/fa'; // Example icons

const ActionMenu = () => {
  const handleItemClick = (action) => {
    alert(`You clicked: ${action}`);
  };

  return (
    <div style={{ position: 'fixed', bottom: '2rem', right: '2rem' }}>
      <OrbitMenu>
        <OrbitMenuTrigger
          as={FaPlus} // The component that triggers the menu
          size={50}
          style={{ 
            background: '#6366f1',
            color: 'white',
            borderRadius: '50%',
            padding: '12px',
            cursor: 'pointer',
            boxShadow: '0 4px 12px rgba(0,0,0,0.2)'
          }}
        />

        {/* These are the items that will orbit the trigger */}
        <OrbitMenuItem onClick={() => handleItemClick('Home')} as={FaHome} />
        <OrbitMenuItem onClick={() => handleItemClick('Settings')} as={FaCog} />
        <OrbitMenuItem onClick={() => handleItemClick('Profile')} as={FaUser} />
        <OrbitMenuItem onClick={() => handleItemClick('Notifications')} as={FaBell} />
      </OrbitMenu>
    </div>
  );
};

export default ActionMenu;

Step 3: Render and Admire

Just import ActionMenu into your main App.js or any other page, and you're done. You now have a fully functional, animated radial menu. Click the purple plus button and watch the items elegantly fan out, ready for interaction. Time's up! How did you do?

Diving Deeper: Customization and Props

The 5-minute example is just the beginning. The real power of react-orbit-menu comes from its props. You can control the radius, the angles, the animation speed, and much more.

Here’s a quick overview of the most important props for the <OrbitMenu> component:

Prop	Type	Default	Description
radius	number	100	The distance of the items from the center trigger, in pixels.
startAngle	number	-90	The angle (in degrees) where the first item appears. 0 is to the right.
arcAngle	number	120	The total angle of the arc the items will be spread across.
animation	string	'boom'	The opening animation. Options: 'boom', 'fan', 'fade'.
animationDuration	number	300	The duration of the animation in milliseconds.
itemRotation	boolean	true	If true, items rotate to stay upright. If false, they align with the radius.

Let's use some of these to create a different feel. How about a semi-circle menu at the top?

// ... same imports

const SemiCircleMenu = () => (
  <OrbitMenu
    radius={120}
    startAngle={0}
    arcAngle={180}
    animation="fan"
    animationDuration={500}
    itemRotation={false}
  >
    <OrbitMenuTrigger as={FaCog} size={40} />
    <OrbitMenuItem onClick={() => {}} as={FaHome} />
    <OrbitMenuItem onClick={() => {}} as={FaUser} />
    <OrbitMenuItem onClick={() => {}} as={FaBell} />
    <OrbitMenuItem onClick={() => {}} as={FaCog} />
    <OrbitMenuItem onClick={() => {}} as={FaPlus} />
  </OrbitMenu>
);

This simple change in props completely transforms the menu's behavior, demonstrating the library's flexibility.

`react-orbit-menu` vs. The Old Way

To truly appreciate the simplicity, let's compare it to building one manually.

Feature	With `react-orbit-menu`	Manual Implementation (CSS/JS)
Setup Time	~5 minutes	Hours, potentially days
Positioning Logic	Handled automatically by props	Manual trigonometry (sin, cos) for each item's x/y coordinates
Animation	Built-in, configurable animations	Complex CSS transitions or a library like Framer Motion
State Management	Internal state for open/closed, handled by the component	Manual `useState` for toggle, plus effects for handling clicks outside
Maintainability	Simple, declarative JSX. Easy to add/remove items.	Brittle. Adding an item requires recalculating all positions.

Conclusion: Your Next UI Superpower

Traditional menus have their place, but for modern, dynamic interfaces, a radial menu is an undeniably powerful tool. It enhances user experience, saves space, and adds a professional polish that makes an application feel truly high-end. For too long, the implementation barrier has kept them from being mainstream.

With react-orbit-menu, that barrier is gone. You can now add a fully-featured, accessible, and highly-performant radial menu to your application with just a few lines of code. You get to focus on what matters—the user's actions—while the library handles all the complex math and state management behind the scenes.

Give it a try in your next project. I'd love to see what you build with it. Check out the GitHub repository to report issues, request features, or even contribute. Happy coding!