Pagination

Description

.bp-pagination is an ordered list of page links inside a <nav aria-label="Pagination">. Active and disabled states are controlled with ARIA attributes — no style classes needed. No JavaScript required for display; JS connects it to your data layer.

Usage

Default

1. ← Prev
2. 1
3. 2
4. 3
5. …
6. 10
7. Next →

<nav aria-label="Pagination">
<ol class="bp-pagination">
  <li class="bp-pagination__item">
    <a href="?page=1" class="bp-pagination__link" aria-disabled="true">← Prev</a>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=1" class="bp-pagination__link" aria-current="page">1</a>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=2" class="bp-pagination__link">2</a>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=3" class="bp-pagination__link">3</a>
  </li>
  <li class="bp-pagination__item">
    <span class="bp-pagination__ellipsis">…</span>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=10" class="bp-pagination__link">10</a>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=2" class="bp-pagination__link">Next →</a>
  </li>
</ol>
</nav>

Middle of range

1. ← Prev
2. 1
3. …
4. 4
5. 5
6. 6
7. …
8. 10
9. Next →

<nav aria-label="Pagination">
<ol class="bp-pagination">
  <li class="bp-pagination__item">
    <a href="?page=4" class="bp-pagination__link">← Prev</a>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=1" class="bp-pagination__link">1</a>
  </li>
  <li class="bp-pagination__item">
    <span class="bp-pagination__ellipsis">…</span>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=4" class="bp-pagination__link">4</a>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=5" class="bp-pagination__link" aria-current="page">5</a>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=6" class="bp-pagination__link">6</a>
  </li>
  <li class="bp-pagination__item">
    <span class="bp-pagination__ellipsis">…</span>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=10" class="bp-pagination__link">10</a>
  </li>
  <li class="bp-pagination__item">
    <a href="?page=6" class="bp-pagination__link">Next →</a>
  </li>
</ol>
</nav>

Public API

Variable	Default	Description
--pagination-color	--bp-color-text	Item text color
--pagination-color-active	--bp-color-bg	Active page text color
--pagination-bg-active	--bp-primary	Active page background
--pagination-border	1px solid --bp-color-border	Item border
--pagination-radius	--bp-radius-md	Item border radius
--pagination-size	2.25rem	Minimum item size
--pagination-gap	--bp-space-1	Gap between items

Customization

Pill style

1. ←
2. 1
3. 2
4. 3
5. →

<nav aria-label="Pagination">
<ol class="bp-pagination demo-pagination--pill">
  <li class="bp-pagination__item">
    <a href="#" class="bp-pagination__link" aria-disabled="true">←</a>
  </li>
  <li class="bp-pagination__item">
    <a href="#" class="bp-pagination__link" aria-current="page">1</a>
  </li>
  <li class="bp-pagination__item">
    <a href="#" class="bp-pagination__link">2</a>
  </li>
  <li class="bp-pagination__item">
    <a href="#" class="bp-pagination__link">3</a>
  </li>
  <li class="bp-pagination__item">
    <a href="#" class="bp-pagination__link">→</a>
  </li>
</ol>
</nav>

✓ No axe violations tested 2026-05-11

WCAG criteria covered:

• 1.3.1 Info & Relationships
• 1.4.3 Contrast (Min)
• 2.1.1 Keyboard
• 4.1.2 Name Role Value

Accessibility

• Wrap in <nav aria-label="Pagination"> to expose it as a landmark.
• Use aria-current="page" on the active page link — CSS reads it for styling, screen readers announce it as current.
• Use aria-disabled="true" on Prev/Next when at the boundary — CSS disables pointer events and reduces opacity.
• The ellipsis (…) is a <span> — not interactive, not announced as a link.
• Prev/Next labels should be descriptive: “Previous page” / “Next page” for screen readers, or use visually-hidden text if using arrow symbols.

Browser APIs

API	Availability	Used for	Without it
aria-current	✓ Widely available Baseline 2017	Active page state	Use a class
aria-disabled	✓ Widely available Baseline 2017	Disabled boundary links	Use :disabled on <button>

Internals

State is entirely attribute-driven: [aria-current="page"] for the active item, [aria-disabled="true"] for disabled links. No .is-active or .is-disabled classes needed. The ellipsis is presentational — CSS gives it the same min-size as page items for consistent spacing.