Morningstar Design System

Pagination

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

Variations

Default

Default
Hover
Focus 
<nav class="mds-pagination__wrapper" aria-label="Pagination Navigation">
    <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" aria-disabled="true" tabindex="-1">
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/icons/mds.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" aria-disabled="true" tabindex="-1">
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/icons/mds.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="page"> 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-hidden="true">
                    <use xlink:href="/icons/mds.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-hidden="true">
                    <use xlink:href="/icons/mds.svg#angle-double-right--s"> </use>
                </svg>
            </a>
        </li>
    </ul>
</nav>
  • Display a maximum interval of eight pages at a time.
  • Single caret icon, angle-left--s / angle-right--s, increments by one page.
  • Double caret icon, angle-double-left--s / angle-double-right--s, jumps to the first or last page.

With Labels

With Labels 
<nav class="mds-pagination__wrapper" aria-label="Pagination Navigation">
    <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-hidden="true">
                    <use xlink:href="/icons/mds.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-hidden="true">
                    <use xlink:href="/icons/mds.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="page"> 4 </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--disabled" aria-label="Go to Next Page" aria-disabled="true" tabindex="-1"> Next
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/icons/mds.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" aria-disabled="true" tabindex="-1"> Last
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/icons/mds.svg#angle-double-right--s"> </use>
                </svg>
            </a>
        </li>
    </ul>
</nav>
  • Include labels for clarity when space permits.

No Arrows

No Arrows 
<nav class="mds-pagination__wrapper" aria-label="Pagination Navigation">
    <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="page"> 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="page">3</a>.
  • Disable the previous and next links when at the beginning or end of a page set. Use the mds-pagination__link--disabled class, combined with aria-disabled="true" and tabindex="-1" to accessibly disable those links.

Code Reference

CSS Class References

Class
 Applies to
 Outcome

mds-pagination__link--selected

mds-pagination__link

Applies the selected visual style to a pagination link. Use to indicate the current or active page. Combine with aria-current="page" to align with accessibility best practices.

mds-pagination__link--disabled

mds-pagination__link

Applies disabled visual style to a pagination link. Combine with aria-disabled="true" and tabindex="-1" to align with accessibility best practices.
©2018 Morningstar, Inc. All rights reserved. Terms of Use