Navigation

Pagination

Page navigation with prev, next, and ellipsis handling.

Element: <nav>
Module: @basenative/components
Function: renderPagination

Quick start

Import the render function and call it from your server template.

import { renderPagination } from '@basenative/components';

renderPagination({ currentPage: 3, totalPages: 10, baseUrl: '/items' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Page 3 of 10

First, prev, page numbers with ellipsis, next, last.

Live render

Source

renderPagination({ currentPage: 3, totalPages: 10, baseUrl: '/items' })

Reactive page

Click prev/next to drive a signal; the pager re-renders.

Live render

Page 1 of 8

Source

const TOTAL = 8;

// renderPagination() is a server helper; in the browser the pager is rebuilt from the signal.
const renderPager = (current) => {
  const pages = [];
  for (let i = 1; i <= TOTAL; i++) {
    pages.push(
      '<li>' +
        (i === current
          ? '<span aria-current="page">' + i + '</span>'
          : '<a href="#p" data-page="' + i + '">' + i + '</a>') +
        '</li>',
    );
  }
  const prev = current > 1
    ? '<a href="#p" data-page="' + (current - 1) + '" rel="prev">Previous</a>'
    : '<span data-bn="pagination-disabled">Previous</span>';
  const next = current < TOTAL
    ? '<a href="#p" data-page="' + (current + 1) + '" rel="next">Next</a>'
    : '<span data-bn="pagination-disabled">Next</span>';
  return '<nav data-bn="pagination" aria-label="Pagination"><ol>' +
    '<li>' + prev + '</li>' + pages.join('') + '<li>' + next + '</li>' +
    '</ol></nav>';
};

const page = signal(1);

effect(() => {
  slot.innerHTML = renderPager(page());
  out.textContent = 'Page ' + page() + ' of ' + TOTAL;
});

slot.addEventListener('click', (e) => {
  const link = e.target.closest('a[data-page]');
  if (link) { e.preventDefault(); page.set(+link.dataset.page); }
});

Options

Arguments accepted by renderPagination().

renderPagination option reference
Option	Type	Default	Description
`currentPage`	`number`	`1`	Active page.
`totalPages`	`number`	`1`	Total page count.
`baseUrl`	`string`	`'#'`	Page link prefix.