Pagination Component

The Pagination component provides an intuitive interface for navigating through multi-page content. It features two variants, accessible controls, and customizable styling options. It is built to use the Astro collections pagination data but can be passed custom pagination data.

Key Features

• Two Variants: Standard and minimal pagination styles

• Dynamic Page Numbers: Intelligent page number display

• Accessible Controls: Built with ARIA support

• Responsive Design: Adapts to different screen sizes

Basic Usage

Create a standard pagination control:

1
<Pagination data={paginationData} maxPagesDisplayed={5} />

Variants

Standard Pagination

The standard pagination includes numbered pages and navigation buttons:

1
<Pagination
2
    data={{
3
        currentPage: 3,
4
        lastPage: 10,
5
        url: { prev: '#', current: '#', next: '#' }
6
    }}
7
    maxPagesDisplayed={5}
8
/>

Minimal Pagination

A simplified version with only previous/next navigation:

1
<PaginationMinimal prevUrl="#" currentUrl="#" nextUrl="#" />

Pagination Props API

Standard Pagination

Minimal Pagination

Common Use Cases