Page Dots Navigation — Section Dot Nav HTML CSS JS

The fixed column of dots down the side of a one-page site — each marking a full-screen section, the active one expanded, click to jump — is the signature navigation of portfolios, product landing pages, and scrollytelling sites. This snippet builds it in plain HTML, CSS, and vanilla JavaScript using IntersectionObserver, so it tracks the active section accurately with no scroll-position math, and includes scroll-snapping sections and hover labels.

IntersectionObserver, not scroll-offset math

The old way to build this was a scroll listener that compared every section's offset against the scroll position on every frame — janky, error-prone, and a performance drain. The modern way is IntersectionObserver: each section is observed, and the browser tells you (off the main thread) when one crosses a visibility threshold. When a section becomes at least half-visible, its dot is marked active. This is dramatically more efficient and more accurate — it just works regardless of section heights, viewport size, or scroll speed, with no manual measurement.

The active dot expands

The dots are small pills; the active one stretches taller (height: 26px) and turns solid white, so the current section is unmistakable at a glance. The transition between dots is animated, so as you scroll from one section to the next, the active indicator smoothly grows on the new dot and shrinks on the old — giving the column a sense of tracking your position continuously rather than snapping. This expanding-active-dot is the detail that makes the navigation feel premium rather than like plain bullet points.

Hover and active labels

Each dot reveals a small label (the section name) on hover, sliding in from the right — so a user can see where a dot leads before clicking, rather than guessing from position. The active dot's label can also show, anchoring the user's sense of "you are here." The labels are dark pills with a slide-and-fade transition, positioned to the left of the dots where a right-edge navigation expects them.

Click to jump, smooth-scroll

Clicking any dot smooth-scrolls to its section via scrollIntoView({ behavior: 'smooth' }) — the native, no-library way to animate to an anchor. Combined with the observer keeping the active dot in sync, clicking a dot scrolls there and the dot activates as the section arrives, so the manual navigation and the scroll-tracking stay consistent. No separate state to manage — the observer is the single source of which section is active, whether you got there by scrolling or clicking.

Scroll-snap sections

The sections use CSS scroll-snap (scroll-snap-type: y mandatory) so scrolling settles cleanly on each full-screen section rather than stopping halfway — the expected behavior for a one-page sectioned site, and it pairs naturally with the dot navigation since each snap point is a dot. The whole thing lives in a scroll container, so it works embedded in a page as well as full-screen.

Data-light and reusable

The dots are generated from the sections themselves (reading a data-label per section), so adding a section automatically adds its dot — there's no separate dots list to keep in sync with the content. Drop in your real sections with labels, and the navigation builds itself. The same pattern works for any full-page-section layout: a portfolio, a product tour, a pitch deck, or a scrollytelling article.