Thumbnails

Add a sidebar of page previews that shows where you are and jumps to any page.

Basics

thumbnails adds a sidebar with a small preview of every page; the current page is highlighted.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { return <PdfViewer source="/samples/multipage.pdf" thumbnails />; }

Thumbnails render lazily as they scroll into view, so a long document costs nothing until the user looks at it. Each thumbnail is a button labeled with its page number, and the sidebar is a named navigation region.

Customization

The sidebar width and the highlight color are CSS variables; the sidebar’s accessible name comes from labels.thumbnails.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; const style = { '--rpv-thumbnails-width': '112px', '--rpv-accent': '#c2410c', } as CSSProperties; export default function Demo() { return ( <PdfViewer source="/samples/multipage.pdf" thumbnails labels={{ thumbnails: 'Page overview' }} style={style} /> ); }

See --rpv-thumbnails-width and --rpv-accent in the CSS variables reference and the customization guide.

Advanced / escape hatch

For a thumbnail strip in your own layout (for example horizontally under the page), use PdfPageCanvas with a small scale or fit box.

Limitations

Hidden in compact layouts. Below compactBreakpoint the sidebar is hidden outside fullscreen, because it would take too much of a narrow screen. Workaround: lower compactBreakpoint, or build a horizontal strip with PdfPageCanvas.
Thumbnails stay rendered. A thumbnail is kept once it has been shown, so memory grows with the number of pages scrolled past. Workaround: a headless strip that renders only what is on screen.
The sidebar is on the left. Its position is fixed. Workaround: a headless layout.

API

PdfViewerProps — Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.