Pagination

HTML/CSS Available
Web Component Upcoming (MDS-6358)
Last Updated
2.0.0

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

Variations

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

<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

<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.

Navigation

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.

Link Template

Variations

Default

With Labels

No Arrows

Guidelines

Use When

Don't Use When

Behaviors

Related UX Patterns

Accessibility

Code Reference

CSS Class References