PDF Page Navigation

"use client";

import { PdfPageNavigation } from "@/components/pdf-page-navigation";

About#

Previous and next page buttons around a page number field. The field shows the page you're on and scrolls the document when you type a new one; out-of-range values are ignored and the field falls back to the current page.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add pdfcn/page-navigation
Copy

Usage#

Copyimport { PdfPageNavigation } from "@/components/pdf-page-navigation";

Copy<PdfViewer documents={[{ url: "/sample.pdf" }]} className="h-[720px]">
  <PdfToolbar>
    <PdfPageNavigation />
  </PdfToolbar>
  <PdfViewerContent />
</PdfViewer>

<PdfPageNavigation /> reads the active document from <PdfViewer />, so it works anywhere inside the tree — not only in a <PdfToolbar />.

The scroll plugin drives both directions: it reports the current page and total, and scrolls when you page or type. It's part of the light tier <PdfViewer /> already registers, so nothing needs to be added to plugins.

Examples#

Default#

"use client";

import { PdfPageNavigation } from "@/components/pdf-page-navigation";

Outside a toolbar#

<PdfPageNavigation /> only needs a <PdfViewer /> above it, so it can float over the page as an overlay:

Copy<PdfViewer documents={[{ url: "/sample.pdf" }]} className="h-[720px]">
  <PdfViewerContent />
  <PdfPageNavigation className="bg-background absolute bottom-4 left-1/2 -translate-x-1/2 rounded-lg border p-1 shadow-md" />
</PdfViewer>

Accessibility#

The previous and next controls are native <button>s with an aria-label matching their tooltip, and are disabled — not hidden — at the first and last page, so tab order stays stable. The page field is labelled Page number, accepts a number, and commits on Enter or blur; out-of-range values are ignored and the field falls back to the document's current page.

Controls render disabled rather than absent while the document loads, so tab order doesn't shift once it resolves.

API Reference#

PdfPageNavigation#

A <div> with data-slot="pdf-page-navigation" wrapping the previous and next buttons around the page field, reading useScroll for the current page and total. Accepts every div prop.