Alok

Scrollspy Line Navigation

Navigation 1

About

A fixed left-side nav of expanding line indicators that track scroll position and trigger custom eased smooth-scrolling to blog sections.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scrollspy Line Navigation to your project and fits it to your theme.

Code

How Scrollspy Line Navigation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import Component from "@/components/ui/cue-scrollspy-line-navigation"

export default function Demo() {
  return <Component />
}

More by Alok

View all
  • Glossy Slider Call Button

    Glossy Slider Call Button

    26
  • Dot Graph Card

    Dot Graph Card

    23
  • Profile Menu Expander

    Profile Menu Expander

    4
  • Pixel Perfect Command Palette

    Pixel Perfect Command Palette

    2
  • Phantom Infinite Gallery

    Phantom Infinite Gallery

    1
  • Collapsing Cards Accordion

    Collapsing Cards Accordion

    1
  • Morphing Pill Duration Editor

    Morphing Pill Duration Editor

    1
  • Interactive Card Sphere

    Interactive Card Sphere

    1

More in Navigation

View all
  • Sidebar

    Sidebar

    354
  • Oversized 404 Numeral

    Oversized 404 Numeral

    71
  • Astryx Clickable Card

    Astryx Clickable Card

  • Pagination Ant

    Pagination Ant

    3
  • Navbar with Theme Toggle

    Navbar with Theme Toggle

    57
  • Breadcramb

    Breadcramb

    93
  • Navbar

    Navbar

    8
  • Footer

    Footer

    454