ChatGPT-like Table of Contents Component Demos

Download Back To CSSScript.Com

Add a ChatGPT-style vertical content rail with pointer, touch, keyboard navigation, floating previews, and no runtime dependencies.

01 / Archive

A dense chapter index

Browse a full-length sequence. The active marker expands around your pointer and reveals its matching note.

38 entries
Pointer · touch · keyboard

Live rail
02 / Journal

A short editorial sequence

The same interaction can hold a small set of substantial sections and keep the reading context close at hand.

8 entries
Content-led preview

Reading notes

A field guide to quiet places.

Each stop has a small observation. Move through the rail to preview the route before reading the full piece.

03 / Milestones

A preview that stays in view

This rail begins with a pinned preview, which makes the current selection immediately visible in compact dashboard or timeline layouts.

12 entries
Open state enabled

Selected: 03