Pagination

Pagination breaks down large amounts of content across a series of pages.

Default

Users can click the next and back links to navigate. Clicking on a page number will take you to the selected page. 

<div class="nsw-container">
    <nav aria-label="Pagination">
        <ul class="nsw-pagination">
            <li class="nsw-pagination__item nsw-pagination__item--prev-page">

                <a class="nsw-direction-link nsw-direction-link--icon-left" href="#">
                    <i class="material-icons nsw-material-icons nsw-material-icons--rotate-180" focusable="false" aria-hidden="true">east</i>
                    <span class="nsw-direction-link__text">
              Back <span class="sr-only">a page</span>
            </span>
                </a>

            </li>
            <li class="nsw-pagination__item">
                <a class="nsw-pagination__link" href="#">
            <span class="nsw-pagination__text">
              <span class="sr-only">Page </span>1
            </span>
                </a>
            </li>
            <li class="nsw-pagination__item">
                <a class="nsw-pagination__link" href="#">
            <span class="nsw-pagination__text">
              <span class="sr-only">Page </span>2
            </span>
                </a>
            </li>
            <li class="nsw-pagination__item nsw-pagination__item--is-active">
                <a class="nsw-pagination__link is-current" href="#" aria-current="page">
            <span class="nsw-pagination__text">
              <span class="sr-only">Page </span>3
            </span>
                </a>
            </li>
            <li class="nsw-pagination__item">
                <a class="nsw-pagination__link" href="#">
            <span class="nsw-pagination__text">
              <span class="sr-only">Page </span>4
            </span>
                </a>
            </li>
            <li class="nsw-pagination__item">
                <a class="nsw-pagination__link" href="#">
            <span class="nsw-pagination__text">
              …
              <span class="sr-only">Page 5</span>
            </span>
                </a>
            </li>
            <li class="nsw-pagination__item">
                <a class="nsw-pagination__link" href="#">
            <span class="nsw-pagination__text">
              <span class="sr-only">Page </span>12
            </span>
                </a>
            </li>
            <li class="nsw-pagination__item nsw-pagination__item--next-page">
                <a class="nsw-direction-link" href="#">
            <span class="nsw-direction-link__text">
              Next <span class="sr-only">page</span>
            </span>
                    <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">east</i>
                </a>
            </li>
        </ul>
    </nav>
</div>

 

Copy

Pagination allows users to see how many pages there are, which page you are currently viewing, and how to navigate to other pages.

Use pagination to separate large lists of content, such as search results into smaller lists that are easier to interact with. Showing content on several pages prevents your content from becoming too long and overwhelming. Consider using pagination when a listing exceeds 10 results

Pagination works best where users are looking for specific pieces of content. Letting the user know on which page a particular piece of information is available makes it easier for them to find it again.

How this component works

Placement

Place at the bottom of the content to give users visibility and flexibility to move throughout the pages.

Controls

The Next and Back controls allow users to easily move forward and backward through the pages. While selecting a page number allows a user to go directly to that page. The first and last page number should always show, and a user’s current page is always highlighted.