Pagination
Pagination moves between numbered pages of results. It is a nav of real links with a current page, disabled ends, a compact form, and no JavaScript.
Public web API
One root hook on a <nav>, part hooks for the ends, the ellipsis, and the compact status.
<nav data-bitsy-pagination aria-label="Pagination">
<ul>
<li><a data-bitsy-pagination-prev href="?page=4" rel="prev">Previous</a></li>
<li><a href="?page=1"><span class="u-visually-hidden">Page </span>1</a></li>
<li data-bitsy-pagination-ellipsis aria-hidden="true">…</li>
<li><a href="?page=4"><span class="u-visually-hidden">Page </span>4</a></li>
<li><a aria-current="page"><span class="u-visually-hidden">Page </span>5</a></li>
<li><a href="?page=6"><span class="u-visually-hidden">Page </span>6</a></li>
<li data-bitsy-pagination-ellipsis aria-hidden="true">…</li>
<li><a href="?page=12"><span class="u-visually-hidden">Page </span>12</a></li>
<li><a data-bitsy-pagination-next href="?page=6" rel="next">Next</a></li>
</ul>
</nav>- The current page and disabled ends are links with no
href, so they are not tab stops. - Page links carry hidden "Page " text so a screen reader says "Page 3".
data-bitsy-variant="compact"swaps the page links for a status;data-bitsy-size="sm"shrinks the targets.- Keep every page a real URL. Do not use buttons.
States and forms
The current page is a raised, bordered target, so it never relies on color alone.
Foundation versus Bit
The foundation styles links and lists. data-bitsy-pagination removes the list markers and underlines and adds square targets, the drawn chevrons, the current page, and dimmed disabled ends. Navigation is native, so the Bit ships no JavaScript.