51Pagination

Real links — Ghost paginates server-side, and links stay crawlable and middle-clickable. First, last, current ±1; the rest elides.

Use it for

Blog and catalog pages

Not for

Infinite feeds

With prev and next

Labelled controls, not bare arrows: “‹ ›” alone is unreadable to a screen reader and ambiguous in RTL. The disabled end stays in the DOM so the row does not reflow.

markup

<nav class="ns-pagination" aria-label="Pages">
  <a class="ns-pagination__step" href="#0" aria-disabled="true"><i class="ph ph-caret-left" aria-hidden="true"></i>Prev</a>
  <a class="ns-pagination__link" href="#0" aria-current="page">1</a>
  <a class="ns-pagination__link" href="#0">2</a>
  <a class="ns-pagination__link" href="#0">3</a>
  <span class="ns-pagination__ellipsis">&hellip;</span>
  <a class="ns-pagination__link" href="#0">24</a>
  <a class="ns-pagination__step" href="#0">Next<i class="ph ph-caret-right" aria-hidden="true"></i></a>
</nav>

Compact

For mobile, and for any set where numbered links would wrap to two rows.

markup

<nav class="ns-pagination ns-pagination--compact" aria-label="Pages">
  <a class="ns-pagination__step" href="#0"><i class="ph ph-caret-left" aria-hidden="true"></i>Prev</a>
  <span class="ns-pagination__status">Page 3 of 24</span>
  <a class="ns-pagination__step" href="#0">Next<i class="ph ph-caret-right" aria-hidden="true"></i></a>
</nav>

Default

markup

<nav aria-label="Pagination">
  <ul class="ns-pagination">
    <li><a class="ns-pagination__link" href="#" rel="prev"><i class="ph ph-caret-left" aria-hidden="true"></i><span class="ns-visually-hidden">Previous page</span></a></li>
    <li><a class="ns-pagination__link" href="#" aria-label="Page 1">1</a></li>
    <li><a class="ns-pagination__link" href="#" aria-current="page" aria-label="Page 2">2</a></li>
    <li><a class="ns-pagination__link" href="#" aria-label="Page 3">3</a></li>
    <li><span class="ns-pagination__ellipsis" aria-hidden="true">…</span></li>
    <li><a class="ns-pagination__link" href="#" aria-label="Page 9">9</a></li>
    <li><a class="ns-pagination__link" href="#" rel="next"><span class="ns-visually-hidden">Next page</span><i class="ph ph-caret-right" aria-hidden="true"></i></a></li>
  </ul>
</nav>

Accessibility contract

aria-current="page" on the current number; icon links carry visually-hidden names