PageNav
PageNav is the “previous / next page” footer of a doc or an article: a <nav> with up to two link cards. Each card shows a small caption, the page title and an arrow.
Demos
Basic
prev sits at the start and next at the end. The links get rel="prev" and rel="next".
Description
description adds a line under the title.
One side
The first page has only next and the last only prev. next stays at the end on its own.
Narrow container
The cards stack when the nav is narrower than 480px. This is a container query, so it follows the nav’s own width, not the window’s.
Captions
prevLabel and nextLabel replace the locale’s “Previous” and “Next”. aria-label renames the nav.
Router links
renderLink renders each card with your router’s link. Spread the props it gets (href, className, rel, children and maybe aria-label) onto the link; the second argument is "prev" or "next".
PageNav Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
prev | { title: ReactNode; href: string; description?: ReactNode } | undefined | The previous page, at the start. | Unreleased |
next | { title: ReactNode; href: string; description?: ReactNode } | undefined | The next page, at the end. | Unreleased |
prevLabel | ReactNode | locale “Previous” | Caption above the previous title. | Unreleased |
nextLabel | ReactNode | locale “Next” | Caption above the next title. | Unreleased |
renderLink | (props: PageNavLinkRenderProps, direction: "prev" | "next") => ReactNode | renders <a> | Renders each link, e.g. with a router’s Link. | Unreleased |
aria-label | string | locale “Previous and next page” | The nav’s accessible name. | Unreleased |
When the caption and the title are both strings, the link is named “Caption: Title” (e.g. “Previous: Installation”) so a screen reader skips the description. With neither prev nor next, nothing renders.
The API follows the doc footers of VitePress and RsPress.