Pagination
When there’s just too much content for a single page
Pagination can be either
<button> or <a> elements depending on the
kind of navigation available. Beware of pagination in combination with filtering and search. If the user can control the amount of content on a page, like rows in a table, the pagination must react to that. Still, pagination might not be need to be visible when filtering or search is active.
Examples
All button-based examples are working, reflecting the intended behaviour.
Base
Pagination is constructed using a nav element with an aria-label attribute. Inside that, an unordered list with the class "pagination". Then, there are up to nine list items with either buttons or links.
HTML
<nav aria-label="Pagination">
<ul class="pagination">
<li aria-hidden="true">
<button title="Previous page">
<span
data-mybicon="mybicon-arrow-left"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
<li>
<button aria-current="page">1</button>
</li>
<li>
<button>2</button>
</li>
<li>
<button>3</button>
</li>
<li>
<button>4</button>
</li>
<li>
<button>5</button>
</li>
<li>
<button>6</button>
</li>
<li>
<button>7</button>
</li>
<li>
<button title="Next page">
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
</ul>
</nav>Hidden stepper
When the first or last page is active, the previous or next button is hidden, but the space remains to avoid deactivating an element and to prevent the pagination from jumping around.
HTML
<nav aria-label="Pagination">
<ul class="pagination">
<li>
<button title="Previous page">
<span
data-mybicon="mybicon-arrow-left"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
<li>
<button>1</button>
</li>
<li>
<button aria-current="page">2</button>
</li>
<li>
<button>3</button>
</li>
<li>
<button>4</button>
</li>
<li>
<button>5</button>
</li>
<li>
<button>6</button>
</li>
<li>
<button>7</button>
</li>
<li>
<button title="Next page">
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
</ul>
</nav>Page skipping
Use page skipping when the range is greater than 7
HTML
<nav aria-label="Pagination">
<ul class="pagination">
<li>
<button title="Previous page">
<span
data-mybicon="mybicon-arrow-left"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li>
<button>3</button>
</li>
<li>
<button aria-current="page">4</button>
</li>
<li>
<button>5</button>
</li>
<li>
<button title="Skip forwards 4 pages">
<span data-mybicon="mybicon-arrows-right" data-mybicon-class="icon-ui"></span>
</button>
</li>
<li>
<button>8</button>
</li>
<li>
<button title="Next page">
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
</ul>
</nav>HTML
<nav aria-label="Pagination">
<ul class="pagination">
<li>
<button title="Previous page">
<span
data-mybicon="mybicon-arrow-left"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
<li>
<button>1</button>
</li>
<li>
<button title="Skip backwards 4 pages">
<span data-mybicon="mybicon-arrows-left" data-mybicon-class="icon-ui"></span>
</button>
</li>
<li>
<button>4</button>
</li>
<li>
<button aria-current="page">5</button>
</li>
<li>
<button>6</button>
</li>
<li>
<button>7</button>
</li>
<li>
<button>8</button>
</li>
<li>
<button title="Next page">
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
</ul>
</nav>Amount
Jump 5 pages when the range is 20 or less
HTML
<nav aria-label="Pagination">
<ul class="pagination">
<li>
<button title="Previous page">
<span
data-mybicon="mybicon-arrow-left"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
<li>
<button>1</button>
</li>
<li>
<button title="Skip backwards 5 pages">
<span data-mybicon="mybicon-arrows-left" data-mybicon-class="icon-ui"></span>
</button>
</li>
<li>
<button>10</button>
</li>
<li>
<button aria-current="page">11</button>
</li>
<li>
<button>12</button>
</li>
<li>
<button title="Skip forwards 5 pages">
<span data-mybicon="mybicon-arrows-right" data-mybicon-class="icon-ui"></span>
</button>
</li>
<li>
<button>18</button>
</li>
<li>
<button title="Next page">
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
</ul>
</nav>Jump 10 pages when the range is greater than 20
HTML
<nav aria-label="Pagination">
<ul class="pagination">
<li>
<button title="Previous page">
<span
data-mybicon="mybicon-arrow-left"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
<li>
<button>1</button>
</li>
<li>
<button title="Skip backwards 10 pages">
<span data-mybicon="mybicon-arrows-left" data-mybicon-class="icon-ui"></span>
</button>
</li>
<li>
<button>21</button>
</li>
<li>
<button aria-current="page">22</button>
</li>
<li>
<button>23</button>
</li>
<li>
<button title="Skip forwards 10 pages">
<span data-mybicon="mybicon-arrows-right" data-mybicon-class="icon-ui"></span>
</button>
</li>
<li>
<button>36</button>
</li>
<li>
<button title="Next page">
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui"
></span>
</button>
</li>
</ul>
</nav>Links
Pagination CSS works with both buttons and links.
HTML
<nav aria-label="Pagination">
<ul class="pagination">
<li>
<a title="Previous page" href="#1">
<span
data-mybicon="mybicon-arrow-left"
data-mybicon-class="icon-ui"
></span>
</a>
</li>
<li>
<a href="#1">1</a>
</li>
<li>
<a aria-current="page" href="#2">2</a>
</li>
<li>
<a href="#3">3</a>
</li>
<li>
<a href="#4">4</a>
</li>
<li>
<a href="#5">5</a>
</li>
<li>
<a href="#6">6</a>
</li>
<li>
<a href="#7">7</a>
</li>
<li>
<a title="Next page" href="#3">
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui"
></span>
</a>
</li>
</ul>
</nav>