react-circular-nav

Library for creating circular or semi-circular navigation menus in React.

Install

npm install react-circular-nav

Peer dependencies (react, react-dom, @mui/material, @emotion/react, @emotion/styled) must be installed in the consuming project.

Usage

import Navigation, { CircularNav, MenuPosition } from "react-circular-nav";

export default function App() {
	return (
		<>
			<Navigation
				menuPosition="bottom"
				buttonColor="navy"
				menuColor="orange"
				openCentralPopup
				popupContent={<div>Central popup content</div>}
				menuItems={[
					{
						id: "home",
						label: "Home",
						onClick: () => console.log("Home clicked")
					},
					"Settings",
					"Profile"
				]}
			/>

			<CircularNav
				data={[
					{ id: "a", label: "A", duration: 50, color: "#3dabf5", onClick: () => {} },
					{ id: "b", label: "B", duration: 50, color: "#3e1bf5", onClick: () => {} }
				]}
			/>
		</>
	);
}

Components

Navigation (default export)

A circular or semi-circular floating menu that can be anchored to any side or corner of the viewport.

| Property | Type | Default | Description | | --------------------- | ------------------------- | ----------------------------------------- | ------------------------------------------------ | | menuItems | Array<MenuItem \| string> | ["Menu Item 1", "Menu Item 2", "Menu Item 3"] | Menu items to display. | | buttonColor | string | "navy" | Color of the toggle button. | | menuColor | string | "orange" | Background color of menu segments. | | menuPosition | MenuPosition | "bottom" | Position of the menu on screen. | | flipLableVertical | boolean | false | Flip labels vertically. | | flipLableHorizontal | boolean | false | Flip labels horizontally. | | clickOpenClose | boolean | true | Toggle open/close on button click. | | openCentralPopup | boolean | false | Show a centered popup when the menu opens. | | popupContent | React.ReactNode | undefined | Content to render inside the central popup. |

MenuPosition is exported as a type: "left" | "right" | "top" | "bottom" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right".

The openCentralPopup popup is only rendered when popupContent is provided, openCentralPopup is true, the menu is open, and menuPosition is not "center". It scales and fades in when the menu opens.

CircularNav (named export)

A full SVG circular navigation wheel with drag and scroll support.

| Property | Type | Default | Description | | ----------------- | ----------------------- | ------- | ------------------------------------------------- | | data | Array<NavData> | built-in| Segment data. | | sameSegmentSize | boolean | false | Give each segment equal angle size. | | innerRadius | number | 140 | Inner radius of the wheel. | | outerRadius | number | 175 | Outer radius of the wheel. |

NavData shape:

interface NavData {
	id: string;
	label: string;
	duration: number;
	color: string;
	onClick: () => void;
}

Example with corner position and central popup

import Navigation from "react-circular-nav";

export default function App() {
	return (
		<Navigation
			menuPosition="bottom-right"
			buttonColor="navy"
			menuColor="orange"
			openCentralPopup
			popupContent={<div>Central popup content</div>}
			menuItems={[
				{ id: "home", label: "Home", onClick: () => console.log("Home") },
				{ id: "settings", label: "Settings", onClick: () => console.log("Settings") },
				{ id: "profile", label: "Profile", onClick: () => console.log("Profile") }
			]}
		/>
	);
}

License

MIT © 11kodykay11