Stacked Breadcrumbs
NavigationLayered chevron tabs create a compact trail with a distinct current page.
Pagination Rail
A raised selection moves through a compact row of numbered page controls.
LIVE PREVIEWInteract with the component
Just React. No extra dependencies.
CSS ModulesCopy the component and its CSS module into your project.
Usage
Matches your current playground settings.
jsx
import PaginationRail from "./PaginationRail";export default function Example() {return (<PaginationRaildefaultPage={3}count={12}visiblePages={5}color={"#c5b69f"}label={"Collection pages"}previousLabel={"Previous page"}nextLabel={"Next page"}disabled={false}/>);}
Using Pagination Rail
Set count to the total pages and use page with onPageChange to connect routing or data fetching. Page numbers start at one.
The numbered window follows the current page while previous and next disable at the boundaries. In narrow containers the numbered rail scrolls without losing access to the arrow buttons.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| page | number | No | undefined | Controlled current page, using one-based numbering. |
| defaultPage | number | No | 1 | Initial uncontrolled page. |
| onPageChange | function | No | undefined | Receives the requested page number. |
| count | number | No | 1 | Total page count, with a minimum of one. |
| visiblePages | number | No | 5 | Maximum numbered buttons to show around the current page. |
| color | string | No | "#c5b69f" | Active page and focus colour. |
| label | string | No | "Pagination" | Accessible navigation label. |
| previousLabel | string | No | "Previous page" | Previous button label. |
| nextLabel | string | No | "Next page" | Next button label. |
| formatLabel | function | No | undefined | Formats each page button accessible label. |
| disabled | boolean | No | false | Disable all controls. |
| className | string | No | "" | Additional classes on the root element. |
| style | CSSProperties | No | undefined | Inline styles for sizing, typography and appearance. |