Navigation CompassNew

A draggable compass dial that doubles as a nav menu — scroll rotates it with physical lag, and links entering the active zone scale up and light with the accent.

Dependencies

motion

Interaction Type

Drag the dial to spin it with momentum, or scroll the page to rotate it. Links passing through the active zone scale up and highlight.

Props

Options you can pass to customize this component.

Prop

Type

Description

links*

CompassNavLink[]

Nav entries placed around the dial. Each has an `angle` (0 = top, clockwise), a `label`, and an `href`.

activeZoneAngle*

number

Angle in degrees (0 = top, clockwise) of the active-zone pointer. Links near it get the highlight treatment.

activeZoneThreshold

number

Half-width of the active-zone cone in degrees. Defaults to 15.

roseRotation

number

Extra rotation of the compass rose in degrees. The artwork's spikes already sit on the diagonals, so the default of 0 keeps them aligned to the 45/135/225/315 marks.

tickCount

number

Number of tick marks around the dial. Defaults to 180.

size

number

SVG viewBox size in px (square); all radii scale from it. The rendered element stays fluid. Defaults to 756.

showDetails

boolean

Renders the active-zone cone plus a live rotation and active-link readout. Defaults to false.

label

string

Accessible name for the navigation landmark. Defaults to "Navigation compass".

className

string

Extra classes merged onto the root element.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/navigation-compass.json

How to use

import { NavigationCompass } from "@/components/illustration/navigation-compass"

const links = [
  { angle: 0, label: "Home", href: "/" },
  { angle: 90, label: "Studio", href: "/studio" },
  { angle: 180, label: "About", href: "/about" },
  { angle: 270, label: "Contact", href: "/contact" },
]

export function Example() {
  return <NavigationCompass links={links} activeZoneAngle={0} />
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/navigation-compass.json