Skip to main content


Pagination allows users to selectively access content divided across multiple pages.


Pagination on a default theme

Best practices

Use on any page which shows a collection that spans multiple pages.


  • Use the pagination component for content such as search results, gallery, catalogs, or lists when they span multiple pages.
  • On page load determine current page and update it's value to be "Currently on page X" and then set all of the other list item aria-labels to be "Page X". This will be an optimized and recommended approach that eliminates the need for data-label.


  • Do not use pagination for content that fits on a single page.
  • Don’t include a "Previous" link if the user is on the first page. Similarly, for the "Next" link when on the last page.

Also known as

Page numbers
Page toggle




Add a class name f-active to set the current page of a paginated list.


  • JavaScript: Scripting documentation defines how to handle this module through JavaScript.
  • Schema definition: The pagination schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Default pagination

<ul data-grid="col-12" class="m-pagination">
        <a class="c-glyph" href="#" aria-label="Previous Page">
    <li class="f-active" data-label="Page 1">
        <span aria-label="Currently on page 1">1</span>
    <li data-label="Currently on page 2">
        <a href="#" aria-label="Page 2">2</a>
    <li data-label="Currently on page 3">
        <a href="#" aria-label="Page 3">3</a>
    <li data-label="Currently on page 4">
        <a href="#" aria-label="Page 4">4</a>
    <li data-label="Currently on page 5">
        <a href="#" aria-label="Page 5">5</a>
        <a class="c-glyph" href="#" aria-label="Next Page">