Toolbar

Place the toolbar above or below the page, choose its actions, and let it collapse into a “More actions” menu on narrow screens.

Basics

toolbar={{ position: 'top' }} moves the toolbar above the page; the default is below it.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { return <PdfViewer source="/samples/letter-3pages.pdf" toolbar={{ position: 'top' }} />; }

The toolbar groups its controls into zoom, page navigation and actions. It is a single tab stop: Tab enters it and ← → Home End move between controls. toolbar={false} hides it.

Choosing actions

actions lists the controls to show. hiddenWhenCompact lists those hidden below compactBreakpoint (960px by default) outside fullscreen; by default that is rotate and print.

import { PdfViewer, type ToolbarConfig } from '@kingtech/react-pdf-viewer'; const toolbar: ToolbarConfig = { actions: [ 'previousPage', 'pageIndicator', 'nextPage', 'zoomOut', 'zoomLevel', 'zoomIn', 'download', ], hiddenWhenCompact: ['download'], }; export default function Demo() { return <PdfViewer source="/samples/multipage.pdf" toolbar={toolbar} />; }

The order of controls within each group is fixed, so every toolbar reads the same way. The available actions are listed in the ToolbarAction reference.

Responsive overflow

The toolbar is always a single row. When it does not fit its container, the actions (fullscreen, rotate, download, print) move into a ⋮ More actions menu; on very narrow viewers the zoom controls follow. Page navigation always stays visible.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import { useState } from 'react'; export default function Demo() { const [width, setWidth] = useState(420); return ( <> <p className="demo-controls"> <label> Container width: {width}px{' '} <input type="range" min={320} max={720} step={10} value={width} onChange={(event) => setWidth(Number(event.target.value))} /> </label> </p> <div style={{ width, maxWidth: '100%', margin: '0 auto' }}> <PdfViewer source="/samples/letter-3pages.pdf" pageInput zoomReset /> </div> </> ); }

The menu follows the WAI-ARIA menu button pattern (Enter or ↓ opens it, arrows move, Esc closes it and returns focus) and opens away from the edge the toolbar sits on.

Customization

Colors, radius, spacing, button and icon sizes, and the menu surface are CSS variables.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; const style = { '--rpv-toolbar-bg': '#4c1d95', '--rpv-toolbar-radius': '999px', '--rpv-toolbar-padding-x': '24px', '--rpv-button-hover-bg': 'rgba(255, 255, 255, 0.18)', '--rpv-menu-bg': '#faf5ff', } as CSSProperties; export default function Demo() { return <PdfViewer source="/samples/letter-3pages.pdf" style={style} />; }

All toolbar variables (--rpv-toolbar-*, --rpv-button-*, --rpv-menu-*) are listed in the CSS variables reference; see also the customization guide.

Advanced / escape hatch

To replace the toolbar with your own UI, or place parts of the default toolbar somewhere else, use renderToolbar with PdfToolbar.

Limitations

Controls cannot be reordered within a group. actions selects controls but keeps their order. Workaround: build your own toolbar with renderToolbar.
The compact layout follows the window width, not the container. compactBreakpoint compares with the viewport, while the overflow menu reacts to the container. Workaround: set compactBreakpoint={0} in narrow containers on wide screens and rely on the overflow menu.
No custom buttons in the default toolbar. Workaround: render PdfToolbar next to your own buttons inside renderToolbar.

API

ToolbarConfig — Toolbar customization: where the toolbar sits, which controls it shows and in which order, and which it hides on narrow screens.
ToolbarAction — Identifies a toolbar control, for choosing which controls the toolbar shows and in which order through ToolbarConfig.