Side Scroll Nav
サイドスクロールナビ
A rail that tracks which section you are reading and slides its marker across as you go. Activation is driven by an IntersectionObserver↗↗ whose margins pull the trip line to the middle of the viewport, so a section takes over as it settles rather than as it first peeks in. Clicking a label scrolls to it. Built with Framer Motion and Tailwind CSS.
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { motion } from "framer-motion"
import { useEffect, useRef, useState, type ReactNode } from "react"
export type SideScrollSection = {
id: string,
label: string,
content: ReactNode
}
How to use it3
"use client"
import { SideScrollNav } from "@/components/ui/side-scroll-nav"
const sections = [
{ id: "overview", label: "Overview", content: <p>Overview</p> },
{ id: "usage", label: "Usage", content: <p>Usage</p> },
]
export default function Page() {
Props
SideScrollNav
| Name | Default | Description |
|---|---|---|
| sections | — | SideScrollSection[] The sections to render and track |
| height | 420 | number Height of the scrollable viewport in pixels |
| dark | false | boolean Render the dark palette |
SideScrollSection (type)
| Name | Default | Description |
|---|---|---|
| id | — | string DOM id for the section, used as the scroll target |
| label | — | string Text shown in the rail |
| content | — | ReactNode What the section renders |