Pagination

Navigation component for multi-page content.

---
import Pagination from "@core-elements/pagination/Pagination.astro";
---

<Pagination page={{"currentPage":3,"lastPage":10,"url":{"first":"/","prev":"/2","current":"/3","next":"/4","last":"/10"}}} />

---
blocks:
  _component: building-blocks/core-elements/pagination
  page:
    currentPage: 3
    lastPage: 10
    url:
      first: /
      prev: /2
      current: /3
      next: /4
      last: /10
---

Overview #

Navigation for paginated content. Works directly with Astro's pagination object to render page links, and highlight the active page.

Properties #

page object

The Astro page object from paginate() function.

showArrows boolean | default: false

Show previous/next chevron buttons either side of the page numbers.

Examples #

With arrows #

---
import Pagination from "@core-elements/pagination/Pagination.astro";
---

<Pagination page={{"currentPage":3,"lastPage":10,"url":{"first":"/","prev":"/2","current":"/3","next":"/4","last":"/10"}}} showArrows />

---
blocks:
  _component: building-blocks/core-elements/pagination
  page:
    currentPage: 3
    lastPage: 10
    url:
      first: /
      prev: /2
      current: /3
      next: /4
      last: /10
  showArrows: true
---