Scroll Progress Navigation
A floating table-of-contents navigation pill that tracks scroll depth, dynamically morphs between resting and floating states, highlights active sections, and enables smooth scrolling.
Loading preview…
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/scroll-progress-nav
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | NavSectionItem[] | [...] | Navigation links with IDs, index numbers, and labels |
| scrollThreshold | number | 150 | Scroll distance in px before morphing into floating pill |
| activeId | string | undefined | Controlled active section ID override |
| onSectionClick | (id: string) => void | undefined | Callback fired when user selects a section |
| position | 'top-center' | 'bottom-center' | 'top-right' | 'top-center' | Screen anchor position |