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

  • This component uses a box-shadow property to create an outline. Internet Explorer and Safari have known issues rendering these outlines when using the browser's zoom functionality. This visual defect doesn't affect the functionality of the component.

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