demo · v140
Segmented Control
A segmented control is a horizontal TOC. The segment anchors are real links, scroll-snap handles panel travel, and :target-current can style the active segment as the user swipes, clicks, or uses arrow keys.
Trending
Whatever is hot right now. Cross-scrolling here updates the segment indicator above.
Recent
Sorted by timestamp. Swipe, click a segment, press a button, or use left/right arrow keys.
Following
The links stay semantic anchors rather than generated pseudo-elements.
Saved
Because the browser owns current-marker calculation, the indicator and scroll position do not need a second state store.
checking support
nav.segments { scroll-target-group: auto; }
nav.segments a:target-current { background: var(--text-black); color: var(--bg-ivory); }real-world note
Before scroll-target-group, this pattern needed a scroll listener plus roving focus or tabindex rules. Here the anchors remain keyboard reachable, while a small script only powers the buttons and the fallback readout.