Vertical dots on the right of the viewport. The current dot fills; hover shows the section name; click to jump.
A small set of dots positioned on the right or bottom side of the screen. Each dot represents one section or slide of the website. The dot corresponding to the currently-visible section is filled or larger than the others. Clicking a dot instantly jumps the page to that section. Almost exclusively used on fullpage scroll websites and slideshow-style presentations.
Dots are small circular elements (8–12px) positioned with position:fixed on the right edge. They're styled with a semi-transparent border by default and filled solid when active. As the user scrolls, JS detects which section is currently in view (using IntersectionObserver) and updates the active class. Clicking a dot triggers a smooth scroll using scrollIntoView().
Scroll the demo (or click the dots on the right). Active dot grows and glows.
Batch 12. Lancashire waxed cotton. Numbered, signed, slow.
An essay on patience, and on the people who hold to the schedule even when nobody is watching.
Waxed cotton from one mill. Brass hardware from one foundry. Cotton thread, undyed.
Forty hours per jacket from the moment the cloth meets the table.
Each jacket is signed inside by the person who made it.
Fourteen stockists, three continents. Try it on before you buy.
Add dot navigation to a 6-section fullpage scroll website. Create 6 dots using position:fixed, right:24px, top:50%, transform:translateY(-50%), displayed as a vertical column with 16px gap between dots. Default dot style: 8px width and height, border-radius:50%, border:2px solid rgba(255,255,255,0.6), background:transparent, cursor:pointer, transition all 0.3s. Active dot style: 12px width and height, background:white, border-color:white, box-shadow:0 0 8px rgba(255,255,255,0.5). On hover of any dot, show a tooltip to the left with the section name (absolute positioned, background:rgba(0,0,0,0.7), white text, padding:4px 10px, border-radius:4px). Use IntersectionObserver (threshold:0.5) to update active dot as sections scroll into view.