Mischief

18 / Documents

Page Navigator

A rail of page thumbnails for moving through a long document, with arrow-key navigation and a clear active page.

Live previewSource

Showing page 2 of 6

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Sidebar({ pages }: { pages: DocumentPage[] }) {
  return <PageNavigator pages={pages} onActivePageChange={scrollToPage} />
}

API

pagesDocumentPage[]Page number, optional thumbnail src, and optional label.
activePage, defaultActivePagenumberThe current page, controlled or uncontrolled.
onActivePageChange(page: number) => voidRuns when the page changes.
orientation"vertical" | "horizontal"Rail direction. Defaults to "vertical".
renderImage(props) => ReactNodeUses a framework image component for thumbnails.

Accessibility

The rail is a tab list with a single tab stop. Arrow keys move between pages along the rail's orientation, Home and End jump to the ends, and focus follows selection. Pages without a thumbnail fall back to an icon and still carry their number, so the control works before any image has loaded.

Dependencies

lucide-react