navigation

ProgressDots

Section progress indicator with dots.

npx chaos add progress-dots

PREVIEW

USAGE

import { ProgressDots } from '@/components/chaos/navigation/progress-dots';

const items = [
  { id: 'intro', label: 'INTRO', href: '#intro' },
  { id: 'features', label: 'FEATURES', href: '#features' },
  { id: 'contact', label: 'CONTACT', href: '#contact' },
];

<ProgressDots items={items} activeId="features" />

PROPS

PropTypeDefault

itemsDot items {id, label?, href?}

ProgressDotItem[]-

activeIdActive dot id

string-

variantVisual variant

"default" | "gold" | "minimal""default"

directionLayout direction

"vertical" | "horizontal""vertical"

showConnectorShow connectors between dots

booleanfalse

onDotClickClick callback

(id: string) => void-