Pagination & pager

Pagination

Pagination is used to quickly navigate between pages or results with the option to go forwards and backwards through pages or to quickly jump to a specific page if necessary.

On the first page of results this view indicates that a user is on Page 1 and so an inactive ‘back’ arrow is featured as we are unable to traverse backwards through the results. On pages after Page 1 both the ‘back’ and ‘forwards’ arrows become active and on the final page of results the ‘forwards’ arrow is now inactive as we are now unable to traverse any further forward.

The page number indicated in the middle of the Pagination component is also a form input and allows a user to type within the input and hit Enter/Go to quickly navigate to that particular page. If a user enters a page number that is higher or lower than a page number available they will land on the nearest page available to their entered number.

This pager is always centrally aligned.

html
            <nav class="rc-pagination" data-pagination="" data-pages="10">
    <form action="" method="POST" class="rc-pagination__form">
        <button type="submit" class="rc-pagination__direction rc-pagination__direction--prev rc-icon rc-left--xs rc-iconography" data-prev aria-label="Previous step"></button>
        <div class="rc-pagination__steps">
            <input type="text" class="rc-pagination__step rc-pagination__step--current" value="1" aria-label="Current step">
            <div class="rc-pagination__step rc-pagination__step--of">of <span total-steps-label=""></span></div>
        </div>
        <button type="submit" class="rc-pagination__direction rc-pagination__direction--prev rc-icon rc-right--xs rc-iconography" data-next aria-label="Next step"></button>
    </form>
</nav>
        

Pager

A pager is a visual representation of the current page of paginated content that the user is currently viewing. Use this markup where possible for an individual link, or use this Component's CSS in order to style an individual pagination link whose structure can't be customised.

To center align the pager add a class of rc-pager--center

html
            <ul class="rc-pager">
    <li class="rc-pager__item">
        <a class="rc-pager__item__link"><span class="rc-screen-reader-text">1</span></a>
    </li>
    <li class="rc-pager__item">
        <a class="rc-pager__item__link rc-pager--active"><span class="rc-screen-reader-text">2</span></a>
    </li>
    <li class="rc-pager__item">
        <a class="rc-pager__item__link"><span class="rc-screen-reader-text">3</span></a>
    </li>
    <li class="rc-pager__item">
        <a class="rc-pager__item__link"><span class="rc-screen-reader-text">4</span></a>
    </li>
    <li class="rc-pager__item">
        <a class="rc-pager__item__link"><span class="rc-screen-reader-text">5</span></a>
    </li>
    <li class="rc-pager__item">
        <a class="rc-pager__item__link"><span class="rc-screen-reader-text">6</span></a>
    </li>
</ul>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 2nd November 2018 [ui_assets/components/pagination.yml]
    Add aria-labels to step pagination component
  • 17th September 2018 [ui_assets/components/pagination.yml]
    spelling and grammar updates
  • 12th July 2018 [ui_assets/components/pagination.yml]
    Update snippets.
  • 12th July 2018 [ui_assets/components/pagination.yml]
    Prefixed classes throughout the portal with rc-.
  • 29th June 2018 [ui_assets/components/pagination.yml]
    add paging
  • 29th June 2018 [ui_assets/components/pagination.yml]
    remove pager page. Add pager to pagination. Update docs
  • 27th June 2018 [ui_assets/components/pagination.yml]
    add pagination docs
  • 25th June 2018 [ui_assets/components/pagination.yml]
    add input type to button
  • 21st June 2018 [ui_assets/components/pagination.yml]
    rejig markup, buttons now inside form
  • 19th June 2018 [ui_assets/components/pagination.yml]
    update data attr
  • 18th June 2018 [ui_assets/components/pagination.yml]
    update structure
  • 5th June 2018 [ui_assets/components/pagination.yml]
    add pagination component