Pagination

Pagination affords navigation between pages of content, and it highlights which page is currently in view.

Variations

Default

White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<nav class="mds-pagination__wrapper">
    <ul class="mds-pagination">
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--disabled" aria-label="Go to First Page">
                <svg class="mds-icon mds-pagination__icon" aria-labelledby="title">
                    <title>angle-double-left--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-double-left--s"></use>
                </svg>
            </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--disabled" aria-label="Go to Previous Page">
                <svg class="mds-icon mds-pagination__icon" aria-labelledby="title">
                    <title>angle-left--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-left--s"></use>
                </svg>
            </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--selected" aria-label="Current Page, Page 1" aria-current="true"> 1 </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 2">2</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 3">3</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 4">4</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 5">5</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 6">6</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 7">7</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 8">8</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Next Page">
                <svg class="mds-icon mds-pagination__icon" aria-labelledby="title">
                    <title>angle-right--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-right--s"></use>
                </svg>
            </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Last Page">
                <svg class="mds-icon mds-pagination__icon" aria-labelledby="title">
                    <title>angle-double-right--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-double-right--s"></use>
                </svg>
            </a>
        </li>
    </ul>
</nav>
  • Display a maximum interval of eight pages at a time.
  • Single caret icon, pagination-left--s / pagination-right--s, increments by one page.
  • Double caret icon, pagination-left-double--s / pagination-right-double--s, jumps to the first or last page.

With Labels

White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<nav class="mds-pagination__wrapper">
    <ul class="mds-pagination">
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to First Page">
                <svg class="mds-icon mds-pagination__icon" aria-labelledby="title">
                    <title>angle-double-left--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-double-left--s"></use>
                </svg> First </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Previous Page">
                <svg class="mds-icon mds-pagination__icon" aria-labelledby="title">
                    <title>angle-left--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-left--s"></use>
                </svg> Previous </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 1">1</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 2">2</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 3">3</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--selected" aria-label="Current Page, Page 4" aria-current="true"> 4 </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--disabled" aria-label="Go to Next Page"> Next
                <svg class="mds-icon mds-pagination__icon" aria-labelledby="title">
                    <title>angle-right--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-right--s"></use>
                </svg>
            </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--disabled" aria-label="Go to Last Page"> Last
                <svg class="mds-icon mds-pagination__icon" aria-labelledby="title">
                    <title>angle-double-right--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-double-right--s"></use>
                </svg>
            </a>
        </li>
    </ul>
</nav>
  • Include labels for clarity when space permits.

No Arrows

White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<nav class="mds-pagination__wrapper">
    <ul class="mds-pagination">
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 1">1</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 2">2</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--selected" aria-label="Current Page, Page 3" aria-current="true"> 3 </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 4">4</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 5">5</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 6">6</a>
        </li>
    </ul>
</nav>
  • Only use when number of pages is eight or fewer.

Guidelines

Use When

  • A table contains more than 30 items.
  • A page contains enough content to justify breaking it into smaller chunks to improve a user’s experience.

Don't Use When

  • Using lazy load to load content as the user scrolls.

Behaviors

  • Disable the first and previous arrow icons (and their labels) when the first page is selected.
  • Disable the next and last arrow icons (and their labels) when the last page is selected.

Accessibility

  • Wrap the links with <nav class=”mds-pagination__wrapper” role="navigation" aria-label="Pagination Navigation"> to explicitly communicate that page navigation is present and that it’s intended for pagination.
  • Add the appropriate ARIA labels to each link, for example, <a href="/page-1" aria-label="Go to Page 1">. This ensures that the screen readers deliver an appropriate message to a user for each link in the pagination component.
  • For the currently selected page in the range, set the appropriate ARIA attributes on the anchor elements, for example, <a href="/page-3" aria-label="Current Page, Page 3" aria-current="true">3</a>.

Code Reference

CSS Class References

Class Applies to Outcome

.mds-pagination

<ul>

Initializes the pagination component. Sets spacing and visual design around border wrapper pill which holds the individual navigation items.

.mds-pagination__item

<li>

Sets visual design treatment and vertical positioning of items within their parent wrapper.

.mds-pagination__link

<a>

Handles horizontal positioning of individual link items within the pagination wrapper. Exposes a hook JavaScript will use to handle the interaction and page transition functionality.

.mds-pagination__icon

<svg>

Targets the icons specifically within the pagination wrapper and fine tunes the positioning of the icon within the item flow.
©2017 Morningstar, Inc. All rights reserved. Terms of Use