Uses

Pagination is extremely important to organizing long lists of content. Pagination is most commonly found on search results pages. If a search engine included thousands of listings without pagination, it would not only slow down the time it takes for a page load because of the amount of content needing to be processed, but it would also be cumbersome and overwhelming to scroll through an enormous amount of content on one page.

Styles

Pagination styles are similar to that of filter menus. The links for each page are inside a rounded box (or button) with a border radius of 3px. The background color is #e3e3e3 with a text color of #3c3c3d. On hover, the background-color changes to #EEEEEE. An active page number link has a background color of #a51417 and a text-color of #FFFFFF.

In pagination, it is important not to list all of the pages once it reaches a certain point as to not overwhelm and overload the site. The School of Medicine site lists the current page, the 2 previous pages, and the 2 following pages. After this, a "..." is shown, followed by the final page and a "Next" button.

An example of this would look like "1", "2", "3", "4", "5", "...", "9", "Next". In this example, third page is the active page, and the user is allowed to skip easily to and from the immediate preceding and following pages. There are 9 total pages.

Examples

The above shows the pagination on the News section of the School of Medicine site. Page "1" is the active page, therefore it does not show the 2 previous pages because there are none. Page 2 and page 3 are the two following pages, followed by page 9 which is the last page in the listing.

In this example, page "3" is the active page. The two previous pages are listed (1 and 2), and the two following pages are listed (4 and 5).

Code

HTML
<nav class="navigation pagination" role="navigation"> <h2 class="screen-reader-text">Posts navigation</h2> <div class="nav-links"> <span aria-current='page' class='page-numbers current'>1</span> <a class='page-numbers' href='https://medicine.wustl.edu/news/category/editors-picks/page/2/'>2</a> <a class='page-numbers' href='https://medicine.wustl.edu/news/category/editors-picks/page/3/'>3</a> <span class="page-numbers dots">&hellip;</span> <a class='page-numbers' href='https://medicine.wustl.edu/news/category/editors-picks/page/9/'>9</a> <a class="next page-numbers" href="https://medicine.wustl.edu/news/category/editors-picks/page/2/">Next ›</a> </div> </nav>
CSS
#paginate-results { max-width: 100%; padding: 35px 0 0; } .page-news #editors-picks-results, .page-news #paginate-results { text-align: center; } #paginate-results span, #paginate-results a { margin-right: 5px; } #paginate-results .next { margin: 0 0 0 5px; } #paginate-results .prev { margin-right: 10px; } .page-numbers { padding: 5px 11px 6px; display: inline-block; font-weight: 700; background-color: #E3E3E3; border-radius: 3px; color: #3C3C3D; } a.page-numbers:hover { background-color: #EEE; } .current { color: #FFF; background-color: #990000; } .pagination .dots { border: 1px solid #e3e3e3; background: transparent; padding: 4px 8px 5px; }