ReadingToolbar

interactive

The flagship bottom-right reading UI. Font-size control (persisted), section prev/next with keyboard shortcuts, IntersectionObserver scroll-spy, and an expandable panel with summaries.

Preview

Scale1.00

Live elsewhere: ReadingToolbar is a fixed-position bottom-right pill. It cannot be rendered inside a bounded preview. Visit the Patterns page to see it in action with section navigation, font-size controls, and the expanded panel.

Features

Font-size control (A-, A, A+) persisted to localStorage
Section prev/next with arrow keys, j/k, Home/End
IntersectionObserver scroll-spy highlights the active section
Expand panel shows all sections with summaries
Honors prefers-reduced-motion

Usage

import { ReadingToolbar } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';
import type { DocSection } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

const sections: DocSection[] = [
  { id: 'intro', num: '§01', title: 'Intro',
    summary: 'Opening section.' },
  { id: 'features', num: '§02', title: 'Features',
    summary: 'Feature overview.' },
];

<ReadingToolbar sections={sections} />

Props

Prop	Type	Default	Description
`sections`	`DocSection[]`	required	Sections to navigate. Each must have a matching DOM element by id.

DocSection interface

Field	Type	Description
`id`	`string`	DOM id for scroll-spy and navigation
`num`	`string`	Section number label (e.g. "§01")
`title`	`string`	Human-readable section title
`summary`	`string`	Short summary for the expanded panel

Accessibility

Keyboard: Arrow keys (or j/k) navigate sections. Home/End jump to first/last. Escape closes the panel.
ARIA: Panel has role="dialog" with aria-label. Toggle has aria-expanded.
Focus management: Expand panel receives focus. Escape returns focus to the toggle button.
Motion: scrollIntoView uses 'auto' when prefers-reduced-motion is active.
Input guard: Keyboard shortcuts are suppressed when focus is inside input, textarea, or select.

Do / Don't

Do

Use ReadingToolbar on long-form content pages with clear sections. Provide meaningful summaries for the panel.

Don't

Don't use on short pages with fewer than 3 sections -- the toolbar adds complexity without value.