Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

View the official docs here

Examples

Basic

The pagination component generates the pagination controls for the page.

You must set up the pagination through Astro’s paginate function (see below). This component then accesses the page property to generate the pagination buttons.

Astro file 
---
// [...page].astro in root of content folder
import BaseLayout from '@layouts/BaseLayout.astro';
import { Pagination } from 'astro-bootstrap';
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
const { page } = Astro.props;
import type { Page } from 'astro';
export interface Props {
  page: Page;
}

export async function getStaticPaths({ paginate }) {
  const pages: CollectionEntry<'components'>[] = await getCollection('components');
  return paginate(pages, { pageSize: 2 });
}
---

<BaseLayout title="Pagination test page">
  
  <h1>List of components (Pagination Test)</h1>
  <p>Page {page.currentPage} of {page.lastPage}</p>
  <p>{page.size} Items per page</p>
  <p>Items {page.start + 1} to {page.end + 1}</p>
  <ul>
    {page.data.map(({ data }) => <li>{data.title}</li>)}
  </ul>
  <div class="d-flex justify-content-center mt-auto">
    <Pagination {page}/>
  </div>
</BaseLayout>

The rendered code is a static example, click here to see a live demo.

The Pagination component returns the default bootstrap pagination component, with the current page as an active link, and prev/next disabled if not available e.g.

You can optionally set the aria-label property with the ariaLabel prop e.g.

<Pagination page={page} aria-label="Pagination">

Manual

API

Pagination

 
import { Pagination } from 'astro-bootstrap'
NameTypeDefaultDescription
page required Astro page property Gives Pagination access to the page
aria-label Astro page property Page pagination control Change the aria-label
class string Appends a class to the pagination ul tag.
itemClass string Appends a class to the page-item li tag.
linkClass string Appends a class to the page-link anchor tag.
delta number 2 Number of pages to display either side of the current page in pagination widget.