Overview

The Pagination component renders previous and next links at the bottom of each documentation page, enabling sequential navigation through the docs.

Scroll to the bottom of this page to see the pagination links in action.

How It Works

1. The sidebar configuration defines the page order
2. getPrevNextLinks() computes adjacent pages based on the current URL
3. The Footer component renders the Pagination with prev/next data

PaginationLink Interface

interface PaginationLink {
  label: string;  // Page title
  href: string;   // Page URL
}

PaginationLinks Interface

interface PaginationLinks {
  prev?: PaginationLink;  // Previous page (undefined on first page)
  next?: PaginationLink;  // Next page (undefined on last page)
}

Features

• Shows "Previous" / "Next" labels with page titles
• Arrow indicators (← and →) for direction
• rel="prev" and rel="next" for SEO
• Respects the dir attribute for RTL layouts
• Only renders links that exist (first page has no prev, last has no next)

CSS Classes

• .pagination-links — Container with grid layout
• .pagination-link — Individual link wrapper
• .prev — Previous link
• .next — Next link (aligned right)
• .link-label — "Previous" / "Next" text
• .link-title — Actual page title

Page Order

Pages are ordered based on their position in the sidebar configuration:

sidebar: [
  {
    label: 'Components',
    items: [
      { label: 'Hero', link: '/docs/components/hero/' },       // 1st
      { label: 'Banner', link: '/docs/components/banner/' },    // 2nd
      { label: 'Icons', link: '/docs/components/icons/' },      // 3rd
    ],
  },
]

Navigation follows this order: Hero → Banner → Icons.