Home
Previous componentNext component

Chapter scrubber

Open in fibo's StorybookOpen in Figma

A rail of marks, one per chapter, that swell under the pointer like the macOS Dock. The tallest mark, the crest, previews its chapter, so people can jump around a long piece without a table of contents.

Chapter scrubberMove the pointer along the rail, or tab to it and use the arrow keys.

Examples

Rest and scrubbing

At rest the rail is a quiet column of hairlines. Under the pointer or keyboard focus the wave swells, and the crest previews its chapter as a card, a single line, or, in this site's copy, nothing at all.

At restEven marks, with the current chapter darker.
Scrubbing with a cardTitle, time and description beside the crest. The default.
Scrubbing with a labelJust the time and title, for chapters the title sums up.
Scrubbing without a previewOnly the wave, for pages that already name the section. This site's copy only.

Direction and marks

The rail runs down a gutter or along a player, with hairline ticks or dots. Ticks grow toward the preview, or out from the middle line on a rail that stands on its own.

HorizontalTicks stand up from the baseline and the preview opens above.
Horizontal dotsA softer rail that sits well under imagery.
Vertical dotsDots grow from their centers as the wave passes.
Centered ticksTicks grow both ways from the middle line.

Sizes

Three densities, from a tight rail for a sidebar to a roomy one for a page of its own. Each is held on the same chapter so the wave heights compare.

sm
default
lg
Small, default and largeSpacing, resting length and crest height all scale together.

Along a player

A horizontal rail under a video or a slide deck, with the card opening above.

00:00Why a design system
Pick a chapter and the player jumps to it.

In an article

The rail in a sticky column beside a long read.

01 / 07

The problem

A long read sits to the right of a quiet rail. At rest it is a column of hairlines; under the pointer the marks swell and name the section, so the reader sees the whole shape of the piece and can jump without a table of contents taking up the margin.

The heading follows the section you pick.

Driven from elsewhere

Buttons elsewhere on the page move the same marker the rail sets.

08:02 · 4 of 14Semantic roles
Use Previous and Next, or pick a chapter on the rail.

Anatomy

A rail of marks, one per chapter. Under the pointer a wave lifts the marks around it, and the tallest, the crest, opens a preview of its chapter beside the rail. The current chapter's mark stays darker at rest.

  1. Rail
  2. Mark
  3. Current chapter
  4. Crest
  5. Preview card
  6. Meta
  7. Description
Mid-scrubHeld on one chapter, so the wave, the crest and the preview card are all on screen.

Guidelines

  • 01Use it for content with a real sequence: a talk, a long read, a case study, a recording.
  • 02Keep between six and thirty chapters. Fewer reads as a list, and more stops the wave from reaching its neighbors.
  • 03Pick card when chapters have descriptions, and label when the title says enough. This site's none suits a page that already names the section.
  • 04Leave side unset in most layouts. It prefers right or top and flips on its own near the viewport edge. Where neither side has room, as on a phone, it opens on the roomier side and narrows to fit, and it closes once the rail scrolls out of view.
  • 05Set currentIndex from your scroll or playback position so the marker keeps up with the reader between clicks.

Best practices

DoGive it enough chapters for the wave to have neighbors to lift.
Don'tDon't use it for three items. Plain links say more in less space.
DoKeep titles short enough to read in the moment the crest passes.
Don'tDon't put the chapter's argument in its title. It gets cut off, and it belongs in the description.
DoUse the card when chapters have a time and a line of description to show.
Don'tDon't open a card for titles alone. A label says the same in less room.

Accessibility

The rail is a single stop in the tab order, and the arrow keys move along it. Focus raises the wave exactly as the pointer does, so keyboard users get the same preview.

KeyDoes
TabDoesMoves onto the rail, at the current chapter
↑↓ or ←→DoesMoves to the previous or next chapter and previews it
Home or EndDoesJumps to the first or last chapter
↵ or SpaceDoesMakes the focused chapter current
  • 01The rail is a listbox named Chapters, or whatever label you give it, and every mark an option named by its title and description. The current chapter is aria-selected.
  • 02Only one mark is in the tab order, and focus moves from mark to mark, so a screen reader reads each chapter as the arrows reach it.
  • 03The preview card is decoration for sighted readers. Everything in it is already in the mark's name.

References