UI
← Home

Scrollspy

A table-of-contents navigation linked to a scrollable region. As the region scrolls, the link for the section at the top of the viewport is marked `aria-current="true"`; clicking a link scrolls its section to the top. At the bottom of the range the last section is current — the case naïve implementations miss.

  • Axe
  • Focus
  • Restore

Preview

Introduction

Introduction section content. Scroll to bring the next section to the top.

Installation

Installation section content. Scroll to bring the next section to the top.

Usage

Usage section content. Scroll to bring the next section to the top.

API

API section content. Scroll to bring the next section to the top.

Installation

npx shadcn@latest add https://ui.publictheta.com/r/scrollspy.json

Conformance

Verified against the @publictheta/ui-spec scrollspy specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

  • Axe — No WCAG 2 A/AA axe-core violations
  • Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
  • Restore — What the user set is still there after a reload — the pane size, the column widths, the open section, the active tab, the scroll position — but only where the host opted in, and never at the cost of working when storage is unavailable

See the full conformance matrix across all components.