Component•Premium

360° Wheel Navigation

A circular navigation control that rotates to the selected section with direct stops and previous or next controls.

Overview

About the 360° Wheel Navigation

A circular navigation control that rotates to the selected section with direct stops and previous or next controls. It is delivered as editable TypeScript for React. Tailwind CSS is required because the delivered navigation JSX uses utility classes, including the accessible sr-only utility. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Streaming, entertainment, and portfolio experiences with a small set of high-level destinations.
Immersive landing pages where navigation should feel like a central interactive feature.

What’s included

Files in the product ZIP

360° Wheel Navigation source

components/wheel-navigation.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

import { WheelNavigation } from "@/components/wheel-navigation";

Minimum example

export default function Navigation() {
  return <WheelNavigation items={["Home", "Work", "About"]} />;
}

Props

Component API

Prop	Type	Default	Description
items	readonly string[]	Built-in eight-item list	Labels arranged around the wheel.
defaultActiveIndex	number	0	Initially selected item index.
eyebrow	string	"Now browsing"	Small label above the active item.
ariaLabel	string	"Sections"	Accessible name for the navigation.
className	string	""	Additional root class names.
style	CSSProperties	undefined	Inline styles for the root element.
onChange	(item: string, index: number) => void	undefined	Runs after a new item is selected.
autoRotate	boolean	false	Automatically advances the wheel for preview-style playback.

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Tailwind CSS is required because the delivered navigation JSX uses utility classes, including the accessible sr-only utility.

Images: No image files are included or required by the packaged component.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the 360° Wheel Navigation ZIP, place the source file at src/components/wheel-navigation.tsx, and copy the example into your own page or feature folder.

Target path

src/components/wheel-navigation.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

Tailwind CSS is required by the component source.
ReactLoom verifies this source with Tailwind CSS 4.3.3; other Tailwind versions have not been verified.
Keep the component and example paths in Tailwind's source detection scope.
For the verified Next.js and Tailwind CSS 4 setup, register @tailwindcss/postcss in postcss.config.mjs.
Import tailwindcss from the application's global CSS entry point.