Pagination

The mobile layout is significantly different, but no extra markup or Javascript is required. Everything is handled within CSS to style and display only the required elements. Resize your browser to see the mobile version on lower breakpoints.

The current (active) page number MUST have a data attribute with the total number of pages, for example: data-total-pages="10"

Default

Basic implementation, supports a maximum of 10 pages

• Previous
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• Next

Usage

<!-- Pagination -->
<ul class="ui-pagination">

  <!-- prev arrow (not active/clickable) -->
  <li class="ui-pagination__prev">Previous</li>

  <!-- page number links - current page is not clikable -->
  <!-- IMPORTANT! the current page MUST have a data-total-pages attribute -->
  <!-- this is used for mobile view where we display pagination like: 3/15 -->
  <li class="ui-pagination__num ui-pagination__num--active" data-total-pages="10"><span>1</span></li>

  <!-- other pages are clickable -->
  <li class="ui-pagination__num"><a href="#2"><span>2</span></a></li>
  <li class="ui-pagination__num"><a href="#3"><span>3</span></a></li>
  <li class="ui-pagination__num"><a href="#4"><span>4</span></a></li>
  <li class="ui-pagination__num"><a href="#5"><span>5</span></a></li>
  <li class="ui-pagination__num"><a href="#6"><span>6</span></a></li>
  <li class="ui-pagination__num"><a href="#7"><span>7</span></a></li>
  <li class="ui-pagination__num"><a href="#8"><span>8</span></a></li>
  <li class="ui-pagination__num"><a href="#9"><span>9</span></a></li>
  <li class="ui-pagination__num"><a href="#10"><span>10</span></a></li>

  <!-- next arrow (clickable) -->
  <li class="ui-pagination__next ui-pagination__next--active"><a href="#next">Next</a></li>
</ul>

First 4 pages

Excluding the last pages (after the ellipsis), a maximum of 5 page links can be displayed.

• Previous
• 1
• 2
• 3
• 4
• 5
• ...
• 62
• Next

• Previous
• 1
• 2
• 3
• 4
• 5
• ...
• 62
• Next

• Previous
• 1
• 2
• 3
• 4
• 5
• ...
• 62
• Next

• Previous
• 1
• 2
• 3
• 4
• 5
• ...
• 62
• Next

Usage

<!-- First 4 pages -->
<ul class="ui-pagination">
  <li class="ui-pagination__prev ui-pagination__prev--active"><a href="#">...</a></li>
  <li class="ui-pagination__num"><a href="#"><span>1</span></a></li>
  <li class="ui-pagination__num"><a href="#"><span>2</span></a></li>
  <li class="ui-pagination__num"><a href="#"><span>3</span></a></li>
  <li class="ui-pagination__num ui-pagination__num--active" data-total-pages="10"><span>4</span></li>
  <li class="ui-pagination__num"><a href="#"><span>5</span></a></li>
  <li class="ui-pagination__ellipsis">...</li>
  <li class="ui-pagination__num"><a href="#"><span>62</span></a></li>
  <li class="ui-pagination__next ui-pagination__next--active"><a href="#">...</a></li>
</ul>

Last 4 pages

Excluding the first pages (before the ellipsis), a maximum of 5 page links can be displayed.

• Previous
• 1
• ...
• 58
• 59
• 60
• 61
• 62
• Next

• Previous
• 1
• ...
• 58
• 59
• 60
• 61
• 62
• Next

• Previous
• 1
• ...
• 58
• 59
• 60
• 61
• 62
• Next

• Previous
• 1
• ...
• 58
• 59
• 60
• 61
• 62
• Next

Usage

<!-- Last 4 pages -->
<ul class="ui-pagination">
  <li class="ui-pagination__prev ui-pagination__prev--active"><a href="#">...</a></li>
  <li class="ui-pagination__num"><a href="#"><span>1</span></a></li>
  <li class="ui-pagination__ellipsis">...</li>
  <li class="ui-pagination__num"><a href="#"><span>58</span></a></li>
  <li class="ui-pagination__num ui-pagination__num--active" data-total-pages="10"><span>59</span></li>
  <li class="ui-pagination__num"><a href="#"><span>60</span></a></li>
  <li class="ui-pagination__num"><a href="#"><span>61</span></a></li>
  <li class="ui-pagination__num"><a href="#"><span>62</span></a></li>
  <li class="ui-pagination__next ui-pagination__next--active"><a href="#">...</a></li>
</ul>

Mid range

Excluding the first/last pages (before/after the ellipsis), a maximum of 5 page links can be displayed.

• Previous
• 1
• ...
• 3
• 4
• 5
• 6
• 7
• ...
• 9
• Next

Usage

<!-- Mid range -->
<ul class="ui-pagination">
  <li class="ui-pagination__prev ui-pagination__prev--active"><a href="#">...</a></li>
  <li class="ui-pagination__num"><a href="#"><span>1</span></a></li>
  <li class="ui-pagination__ellipsis">...</li>
  <li class="ui-pagination__num"><a href="#"><span>3</span></a></li>
  <li class="ui-pagination__num"><a href="#"><span>4</span></a></li>
  <li class="ui-pagination__num ui-pagination__num--active" data-total-pages="9"><span>5</span></li>
  <li class="ui-pagination__num"><a href="#"><span>6</span></a></li>
  <li class="ui-pagination__num"><a href="#"><span>7</span></a></li>
  <li class="ui-pagination__ellipsis">...</li>
  <li class="ui-pagination__num"><a href="#"><span>9</span></a></li>
  <li class="ui-pagination__next ui-pagination__next--active"><a href="#">...</a></li>
</ul>