Build Stunning React Radial Menus in 10 Mins (My Lib)

npm install react-awesome-radial-menu react-icons
# or
yarn add react-awesome-radial-menu react-icons

Step 2: Basic Usage

Now, let's create a simple component that uses the radial menu. We'll make a menu with four actions: Home, Search, Profile, and Settings.

import React from 'react';
import { RadialMenu } from 'react-awesome-radial-menu';
import { FaHome, FaSearch, FaUser, FaCog, FaPlus } from 'react-icons/fa';

const MyAwesomeMenu = () => {
  const items = [
    { name: 'Home', icon: <FaHome />, action: () => console.log('Home clicked') },
    { name: 'Search', icon: <FaSearch />, action: () => console.log('Search clicked') },
    { name: 'Profile', icon: <FaUser />, action: () => console.log('Profile clicked') },
    { name: 'Settings', icon: <FaCog />, action: () => console.log('Settings clicked') },
  ];

  const handleSelect = (name) => {
    // Find the item by name and execute its action
    const selectedItem = items.find(item => item.name === name);
    if (selectedItem && selectedItem.action) {
      selectedItem.action();
    }
  };

  return (
    <RadialMenu
      items={items}
      onSelect={handleSelect}
      centerButtonContent={<FaPlus />}
    />
  );
};

export default MyAwesomeMenu;

And... that's it! Drop this `MyAwesomeMenu` component into your app, and you'll have a fully functional radial menu. Clicking the plus icon will fan out the four items, and clicking any item will log a message to the console.

See? We're probably only five minutes in, and the core functionality is already done. Now for the fun part.

Making It *Stunning*: Customization

A default menu is fine, but you want it to match your app's brand and feel. `react-awesome-radial-menu` offers multiple ways to customize its appearance and behavior.

Styling with Props

You can control the geometry of the menu directly through props. Want the items to be further from the center? Or maybe start at a different angle? Easy.

<RadialMenu
  items={items}
  onSelect={handleSelect}
  centerButtonContent={<FaPlus />}
  // Customization props
  distance={120}       // Distance of items from the center in pixels
  startAngle={-90}     // Start angle in degrees (0 is to the right)
  spreadAngle={180}    // The total angle the items will cover
  itemSize={60}        // Size of each menu item
  centerButtonSize={80}  // Size of the center button
/>

Theming with CSS Variables

For deep customization of colors and styles, the component uses CSS variables. This makes it incredibly easy to theme the menu from your global CSS file without fighting specificity.

Just override these variables in your CSS:

:root {
  /* Your app's theme */
  --rarm-bg-color: #3b82f6; /* A nice blue */
  --rarm-bg-color-hover: #2563eb;
  --rarm-icon-color: #ffffff;
  --rarm-border-color: #ffffff;
  --rarm-transition-speed: 0.3s;
}

With these few lines of CSS, your radial menu will now perfectly match your application's blue color scheme.

Animations and Transitions

The library comes with a few built-in animations. The default is a smooth, staggered fan-out effect. You can change the animation style via the `animation` prop.

<RadialMenu
  ...
  animation="fade-in" // or "spin-in", "stagger"
/>

The speed of the transition is also controllable via the `--rarm-transition-speed` CSS variable, giving you full control over the feel of the interaction.

Advanced Features for Power Users

The library is designed to be simple, but it doesn't shy away from powerful features.

Dynamic Menu Items

Since the `items` prop is just a standard React prop, you can easily make your menu dynamic. For example, you could show different menu items depending on whether a user is logged in.

const getMenuItems = (isLoggedIn) => {
  const baseItems = [
    { name: 'Home', icon: <FaHome /> },
    { name: 'Search', icon: <FaSearch /> },
  ];

  if (isLoggedIn) {
    return [
      ...baseItems,
      { name: 'Profile', icon: <FaUser /> },
      { name: 'Logout', icon: <FaSignOutAlt /> },
    ];
  }

  return [
    ...baseItems,
    { name: 'Login', icon: <FaSignInAlt /> },
  ];
};

const MyDynamicMenu = ({ isLoggedIn }) => {
  const items = getMenuItems(isLoggedIn);
  // ... render RadialMenu with these items
};

Accessibility First

I believe great UI should be usable by everyone. `react-awesome-radial-menu` is built with accessibility in mind. When the menu is opened, focus is managed correctly, and you can navigate between items using the arrow keys. It uses `aria-` attributes to provide context to screen readers, making the experience seamless for all users.

Why I Built This

A few months ago, I was working on a mobile-first dashboard that was getting cluttered with action buttons. A radial menu seemed like the perfect solution. I started building one, but quickly got bogged down in the math and browser inconsistencies. I looked for existing libraries, but many were outdated, heavy, or lacked the customization I needed.

I realized that other developers must be facing the same frustration. So, I decided to build the library I wished I had: simple, modern, and powerful. My goal was to abstract away the pain points so that any developer could add this elegant UI pattern to their app without a second thought.

Get Started Today!

Building beautiful, complex UIs doesn't have to be a chore. With `react-awesome-radial-menu`, you can add a professional and intuitive navigation element to your React apps in minutes.

I encourage you to give it a try in your next project. It’s open source, and I’m always looking for feedback and contributions.

• Check it out on NPM: `react-awesome-radial-menu`
• Star the repo on GitHub: GitHub Repository
• Play with a live demo: CodeSandbox Demo

Have you built something cool with it? Have a feature request? Drop a comment below or open an issue on GitHub. Happy coding!