Pagination

The Pagination component provides a reusable pattern for pagination in the interface.

Pagination

Basic pagination with 15 pages, demonstrating overflow ellipsis indicators when the list exceeds five visible items.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button"
      data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" href="/components/pagination?pagination=1" target="_top"
          aria-label="1" data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=2" target="_top" aria-label="2" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=3" target="_top" aria-label="3" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="5">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=5" target="_top" aria-label="5" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">5</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item u-display--none@xs">
      <!-- icon.blade.php -->
    </li>
    <li class="c-pagination__item u-display--none@xs">
      <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" aria-label="15" href="/components/pagination?pagination=15" target="_top" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-text">15</span></span></a>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=2" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/pagination?pagination=5', 'label' => 'Page 5'],
        ['href' => '/components/pagination?pagination=6', 'label' => 'Page 6'],
        ['href' => '/components/pagination?pagination=7', 'label' => 'Page 7'],
        ['href' => '/components/pagination?pagination=8', 'label' => 'Page 8'],
        ['href' => '/components/pagination?pagination=9', 'label' => 'Page 9'],
        ['href' => '/components/pagination?pagination=10', 'label' => 'Page 10'],
        ['href' => '/components/pagination?pagination=11', 'label' => 'Page 11'],
        ['href' => '/components/pagination?pagination=12', 'label' => 'Page 12'],
        ['href' => '/components/pagination?pagination=13', 'label' => 'Page 13'],
        ['href' => '/components/pagination?pagination=14', 'label' => 'Page 14'],
        ['href' => '/components/pagination?pagination=15', 'label' => 'Page 15'],
    ],
    'current' => isset($_GET['pagination']) ? $_GET['pagination'] : 1
])
@endpagination

Using JS

With just a few added attributes you can have pagination made for you, including keepDOM, pagesToShow, and randomizeOrder options.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Sort by

Item 8

Item 9

Item 3

Item 4

Item 5

Item 1

Item 2

Item 6

Item 7

<div class="c-card u-margin__bottom--8 c-card--ratio-16-9" data-js-pagination-target="" data-component="card">
  <div class="c-card__paint-container">
    <div class="c-card__header" data-component="card__header">
      <!-- typography.blade.php   original: h4 -->
      <h2 class="c-typography c-typography__variant--h2" data-component="typography">
        Simple pagination
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--p" data-component="typography">
        Showing all pages in the pagination at the same time.
      </p>
    </div>
    <div class="c-card__body" data-component="card__body">
      <!-- collection.blade.php -->
      <div class="c-collection" data-js-pagination-container="" data-component="collection">
        <!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 1
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 2
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 3
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 4
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 5
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 6
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 7
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 8
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 9
          </div>
        </div>
      </div><!-- pagination.blade.php -->
      <nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="1" data-js-pagination-per-page="1" data-js-pagination-max-pages="0"
      data-js-pagination-pages-to-show="0" data-js-pagination-keep-dom="1" data-component="pagination">
        <ul class="c-pagination__list">
          <li class="c-pagination__item--previous c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button"
            data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
          <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links="">
              <li class="c-pagination__item" data-js-pagination-index="1">
                <button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" type="button" aria-label="1" data-component=
                "button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></button>
              </li>
            </ul>
          </li>
          <li class="c-pagination__item--next c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button"
            data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div><!-- card.blade.php -->
<div class="c-card u-margin__bottom--8 c-card--ratio-16-9" data-js-pagination-target="" data-async-pagination-example="true" data-component="card">
  <div class="c-card__paint-container">
    <div class="c-card__header" data-component="card__header">
      <!-- typography.blade.php   original: h4 -->
      <h3 class="c-typography c-typography__variant--h3" data-component="typography">
        Async rendered pagination items
      </h3><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--p" data-component="typography">
        Items are injected into the pagination container after initialization using script.
      </p>
    </div>
    <div class="c-card__body" data-component="card__body">
      <!-- collection.blade.php -->
      <div class="c-collection" data-js-pagination-container="" data-component="collection"></div><!-- pagination.blade.php -->
      <nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="1" data-js-pagination-per-page="2" data-js-pagination-max-pages="0"
      data-js-pagination-pages-to-show="4" data-js-pagination-async="1" data-js-pagination-keep-dom="1" data-component="pagination">
        <ul class="c-pagination__list">
          <li class="c-pagination__item--previous c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button"
            data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
          <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links="">
              <li class="c-pagination__item" data-js-pagination-index="1">
                <button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" type="button" aria-label="1" data-component=
                "button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></button>
              </li>
            </ul>
          </li>
          <li class="c-pagination__item--next c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button"
            data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>
<script>
<![CDATA[
    document.addEventListener('DOMContentLoaded', () => {
        const asyncExample = document.querySelector('[data-async-pagination-example="true"]');
        if (!(asyncExample instanceof HTMLElement)) {
            return;
        }

        const listContainer = asyncExample.querySelector('[data-js-pagination-container]');
        if (!(listContainer instanceof HTMLElement)) {
            return;
        }

        const createItem = (number) => {
            const item = document.createElement('div');
            item.setAttribute('data-js-pagination-item', '');
            item.setAttribute('data-js-pagination-item-title', String(number));
            item.textContent = `Async item ${number}`;

            return item;
        };

        const delay = (milliseconds) => new Promise((resolve) => {
            setTimeout(resolve, milliseconds);
        });

        const renderAsyncItems = async () => {
            await delay(4000);

            [1, 2, 3, 4].forEach((number) => {
                listContainer.appendChild(createItem(number));
            });

            await delay(600);

            [5, 6, 7, 8].forEach((number) => {
                listContainer.appendChild(createItem(number));
            });
        };

        renderAsyncItems();
    }, { once: true });
]]>
</script> <!-- card.blade.php -->
<div class="c-card u-margin__bottom--8 c-card--ratio-16-9" data-js-pagination-target="" data-component="card">
  <div class="c-card__paint-container">
    <div class="c-card__header" data-component="card__header">
      <!-- typography.blade.php   original: h4 -->
      <h4 class="c-typography c-typography__variant--h4" data-component="typography">
        Pagination with pagesToShow attribute.
      </h4><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--p" data-component="typography">
        Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
      </p>
    </div>
    <div class="c-card__body" data-component="card__body">
      <!-- collection.blade.php -->
      <div class="c-collection" data-js-pagination-container="" data-component="collection">
        <!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 1
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 2
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 3
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 4
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 5
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 6
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 7
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 8
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-component="collection__item">
          <div class="c-collection__content">
            Item 9
          </div>
        </div>
      </div><!-- pagination.blade.php -->
      <nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="1" data-js-pagination-per-page="1" data-js-pagination-max-pages="0"
      data-js-pagination-pages-to-show="4" data-js-pagination-keep-dom="1" data-component="pagination">
        <ul class="c-pagination__list">
          <li class="c-pagination__item--previous c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button"
            data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
          <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links="">
              <li class="c-pagination__item" data-js-pagination-index="1">
                <button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" type="button" aria-label="1" data-component=
                "button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></button>
              </li>
            </ul>
          </li>
          <li class="c-pagination__item--next c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button"
            data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div><!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-js-pagination-target="" data-component="card">
  <div class="c-card__paint-container">
    <div class="c-card__header" data-component="card__header">
      <!-- typography.blade.php   original: h4 -->
      <h4 class="c-typography c-typography__variant--h4" data-component="typography">
        Pagination with pagesToShow attribute.
      </h4><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--p" data-component="typography">
        Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
      </p>
    </div>
    <div class="c-card__body" data-component="card__body">
      <div class="c-field c-select u-margin__bottom--4 c-select--sm c-select--singleselect is-required" data-js-pagination-sort="" id="id_6aaefc1fef9b0" data-js-toggle-item=
      "6aaefc1fef9b0-open-dropdown" data-js-toggle-class="is-open" data-js-select-component="true" data-js-click-away="is-open" data-js-is-empty-select="true" data-js-device-detect="true"
      data-js-select-type="single" data-component="select">
        <label class="c-field__label" for="select_6aaefc1fef9b0">Sort by <span class="u-color__text--danger" aria-hidden="true">*</span></label>
        <div class="c-select__field-container">
          <select id="select_6aaefc1fef9b0" data-js-select-element="1" required="required" aria-hidden="true" data-required="1" aria-required="1" data-js-required="" class="c-select__select-element"
          tabindex="-1">
            <option class="c-select__select-option" value="">
            </option>
            <option class="c-select__select-option" value="default">
              Default order
            </option>
            <option class="c-select__select-option" value="alphabetical">
              Alphabetical
            </option>
            <option class="c-select__select-option" value="random" selected="selected">
              Random
            </option>
          </select>
          <div class="c-select_focus-styler u-level-top"></div>
          <div class="c-select__expand-button" role="button">
            <!-- icon.blade.php -->
             <!-- icon.blade.php -->
          </div>
          <div class="c-field__inner">
            <div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay="" data-js-toggle-trigger="6aaefc1fef9b0-open-dropdown" data-js-placeholder=""></div>
          </div>
        </div><!-- Visual dropdown list -->
        <div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
          <ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
            <li class="c-select__option" data-js-dropdown-option="default" role="option" aria-selected="false" tabindex="0">
              <!-- icon.blade.php -->
               <!-- icon.blade.php -->
               <span class="c-select__option-label">Default order</span>
            </li>
            <li class="c-select__option" data-js-dropdown-option="alphabetical" role="option" aria-selected="false" tabindex="0">
              <!-- icon.blade.php -->
               <!-- icon.blade.php -->
               <span class="c-select__option-label">Alphabetical</span>
            </li>
            <li class="c-select__option is-selected" data-js-dropdown-option="random" role="option" aria-selected="true" tabindex="0">
              <!-- icon.blade.php -->
               <!-- icon.blade.php -->
               <span class="c-select__option-label">Random</span>
            </li>
          </ul>
        </div>
        <div class="c-select__select-invalid-message" id="error_input_6aaefc1fef9b0_message">
          <!-- icon.blade.php -->
        </div>
        <template>
          <ul>
            <li class="c-select__option" data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
              <!-- icon.blade.php -->
               <!-- icon.blade.php -->
               <span class="c-select__option-label">{OPTION_NAME}</span>
            </li>
          </ul>
        </template>
      </div><!-- collection.blade.php -->
      <div class="c-collection" data-js-pagination-container="" data-component="collection">
        <!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="8" data-component="collection__item">
          <div class="c-collection__content">
            Item 8
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="9" data-component="collection__item">
          <div class="c-collection__content">
            Item 9
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="3" data-component="collection__item">
          <div class="c-collection__content">
            Item 3
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="4" data-component="collection__item">
          <div class="c-collection__content">
            Item 4
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="5" data-component="collection__item">
          <div class="c-collection__content">
            Item 5
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="1" data-component="collection__item">
          <div class="c-collection__content">
            Item 1
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="2" data-component="collection__item">
          <div class="c-collection__content">
            Item 2
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="6" data-component="collection__item">
          <div class="c-collection__content">
            Item 6
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="7" data-component="collection__item">
          <div class="c-collection__content">
            Item 7
          </div>
        </div>
      </div><!-- pagination.blade.php -->
      <nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="1" data-js-pagination-per-page="1" data-js-pagination-max-pages="0"
      data-js-pagination-pages-to-show="4" data-js-pagination-keep-dom="1" data-component="pagination">
        <ul class="c-pagination__list">
          <li class="c-pagination__item--previous c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button"
            data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
          <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links="">
              <li class="c-pagination__item" data-js-pagination-index="1">
                <button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" type="button" aria-label="1" data-component=
                "button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></button>
              </li>
            </ul>
          </li>
          <li class="c-pagination__item--next c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button"
            data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>


@card([
    'attributeList' => [
        'data-js-pagination-target' => ''
    ],
    'classList' => ['u-margin__bottom--8']
])
    @card__header()
        @typography([
            'element' => "h4"
        ])
            Simple pagination
        @endtypography
        @typography([
        ])
            Showing all pages in the pagination at the same time.
        @endtypography
    @endcard__header
    @card__body()
        @collection(['attributeList' => ['data-js-pagination-container' => '']])
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 1
            @endcollection__item

            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 2
            @endcollection__item

            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 3
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 4
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 5
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 6
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 7
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 8
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 9
            @endcollection__item
        @endcollection

        @pagination([
            'current' => 1,
            'useJS' => true,
            'perPage' => 1,
            'keepDOM' => true,
        ])
        @endpagination
    @endcard__body
@endcard

@card([
    'attributeList' => [
        'data-js-pagination-target' => '',
        'data-async-pagination-example' => 'true'
    ],
    'classList' => ['u-margin__bottom--8']
])
    @card__header()
        @typography([
            'element' => "h4"
        ])
            Async rendered pagination items
        @endtypography
        @typography([])
            Items are injected into the pagination container after initialization using script.
        @endtypography
    @endcard__header
    @card__body()
        @collection([
            'attributeList' => [
                'data-js-pagination-container' => ''
            ]
        ])
        @endcollection

        @pagination([
            'current' => 1,
            'useJS' => true,
            'perPage' => 2,
            'pagesToShow' => 4,
            'keepDOM' => true,
            'async' => true
        ])
        @endpagination
    @endcard__body
@endcard

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const asyncExample = document.querySelector('[data-async-pagination-example="true"]');
        if (!(asyncExample instanceof HTMLElement)) {
            return;
        }

        const listContainer = asyncExample.querySelector('[data-js-pagination-container]');
        if (!(listContainer instanceof HTMLElement)) {
            return;
        }

        const createItem = (number) => {
            const item = document.createElement('div');
            item.setAttribute('data-js-pagination-item', '');
            item.setAttribute('data-js-pagination-item-title', String(number));
            item.textContent = `Async item ${number}`;

            return item;
        };

        const delay = (milliseconds) => new Promise((resolve) => {
            setTimeout(resolve, milliseconds);
        });

        const renderAsyncItems = async () => {
            await delay(4000);

            [1, 2, 3, 4].forEach((number) => {
                listContainer.appendChild(createItem(number));
            });

            await delay(600);

            [5, 6, 7, 8].forEach((number) => {
                listContainer.appendChild(createItem(number));
            });
        };

        renderAsyncItems();
    }, { once: true });
</script>



@card([
    'attributeList' => [
        'data-js-pagination-target' => ''
    ],
    'classList' => [
        'u-margin__bottom--8'
    ]
])
    @card__header()
        @typography([
            'element' => "h4"
        ])
            Pagination with pagesToShow attribute.
        @endtypography
        @typography([
        ])
            Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
        @endtypography
    @endcard__header
    @card__body()
        @collection(['attributeList' => ['data-js-pagination-container' => '']])
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 1
            @endcollection__item

            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 2
            @endcollection__item

            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 3
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 4
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 5
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 6
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 7
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 8
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 9
            @endcollection__item
        @endcollection

        @pagination([
            'current' => 1,
            'useJS' => true,
            'perPage' => 1,
            'pagesToShow' => 4,
            'keepDOM' => true,
        ])
        @endpagination
    @endcard__body
@endcard

@card([
    'attributeList' => [
        'data-js-pagination-target' => ''
    ]
])
    @card__header()
        @typography([
            'element' => "h4"
        ])
            Pagination with pagesToShow attribute.
        @endtypography
        @typography([
        ])
            Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
        @endtypography
    @endcard__header
    @card__body()
        @select([
            'label' => 'Sort by',
            'hidePlaceholder' => true,
            'required' => true,
            'preselected' => 'random',
            'size' => 'sm',
            'limitWidth' => true,
            'options' => [
                'default' => 'Default order',
                'alphabetical' => 'Alphabetical',
                'random' => 'Random',
            ],
            'attributeList' => [
                'data-js-pagination-sort' => '',
            ],
            'classList' => [
                'u-margin__bottom--4',
            ],
        ])
        @endselect

        @collection(['attributeList' => ['data-js-pagination-container' => '']])
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '8']])
                Item 8
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '9']])
                Item 9
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '3']])
                Item 3
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '4']])
                Item 4
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '5']])
                Item 5
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '1']])
                Item 1
            @endcollection__item

            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '2']])
                Item 2
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '6']])
                Item 6
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '7']])
                Item 7
            @endcollection__item
        @endcollection

        @pagination([
            'current' => 1,
            'useJS' => true,
            'perPage' => 1,
            'pagesToShow' => 4,
            'keepDOM' => true,
        ])
        @endpagination
    @endcard__body
@endcard

Small list

Pagination with four pages and a static active page — no overflow or ellipsis indicators are shown when the total fits within the visible window.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=1" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=1" target="_top" aria-label="1" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" href="/components/pagination?pagination=2" target="_top"
          aria-label="2" data-component="button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=3" target="_top" aria-label="3" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=3" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
    ],
    'current' => 2
])
@endpagination

Button size: medium

Pagination rendered with medium-sized buttons using buttonSize 'md', producing wider page-number buttons than the default small size.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--md c-button--icon-only" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=2" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--md" href="/components/pagination?pagination=1" target="_top" aria-label="1" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--md" href="/components/pagination?pagination=2" target="_top" aria-label="2" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--md" href="/components/pagination?pagination=3" target="_top"
          aria-label="3" data-component="button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--md" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="5">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--md" href="/components/pagination?pagination=5" target="_top" aria-label="5" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">5</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--md c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=4" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/pagination?pagination=5', 'label' => 'Page 5'],
    ],
    'current' => 3,
    'buttonSize' => 'md'
])
@endpagination

Button size: large

Pagination rendered with large-sized buttons using buttonSize 'lg', producing the widest page-number buttons in the available size scale.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--lg c-button--icon-only" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=2" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--lg" href="/components/pagination?pagination=1" target="_top" aria-label="1" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--lg" href="/components/pagination?pagination=2" target="_top" aria-label="2" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--lg" href="/components/pagination?pagination=3" target="_top"
          aria-label="3" data-component="button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--lg" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="5">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--lg" href="/components/pagination?pagination=5" target="_top" aria-label="5" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">5</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--lg c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=4" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/pagination?pagination=5', 'label' => 'Page 5'],
    ],
    'current' => 3,
    'buttonSize' => 'lg'
])
@endpagination

Button style: outlined

Pagination using outlined button style, giving page buttons a bordered appearance instead of the default filled background.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <a class="c-button c-button__outlined c-button__outlined--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=2" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-button__outlined c-button__outlined--default c-button--sm" href="/components/pagination?pagination=1" target="_top" aria-label="1" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-button__outlined c-button__outlined--default c-button--sm" href="/components/pagination?pagination=2" target="_top" aria-label="2" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__outlined c-button__outlined--primary c-button--sm" href="/components/pagination?pagination=3" target="_top"
          aria-label="3" data-component="button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__outlined c-button__outlined--default c-button--sm" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="5">
          <a class="c-button c-pagination__link c-button__outlined c-button__outlined--default c-button--sm" href="/components/pagination?pagination=5" target="_top" aria-label="5" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">5</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__outlined c-button__outlined--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=4" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/pagination?pagination=5', 'label' => 'Page 5'],
    ],
    'current' => 3,
    'buttonStyle' => 'outlined'
])
@endpagination

Button style: basic

Pagination using basic button style, rendering page buttons without fill or border for a minimal, text-only appearance.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <a class="c-button c-button__basic c-button__basic--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=2" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-button__basic c-button__basic--default c-button--sm" href="/components/pagination?pagination=1" target="_top" aria-label="1" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-button__basic c-button__basic--default c-button--sm" href="/components/pagination?pagination=2" target="_top" aria-label="2" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__basic c-button__basic--primary c-button--sm" href="/components/pagination?pagination=3" target="_top"
          aria-label="3" data-component="button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__basic c-button__basic--default c-button--sm" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="5">
          <a class="c-button c-pagination__link c-button__basic c-button__basic--default c-button--sm" href="/components/pagination?pagination=5" target="_top" aria-label="5" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-text">5</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__basic c-button__basic--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=4" target="_top" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/pagination?pagination=5', 'label' => 'Page 5'],
    ],
    'current' => 3,
    'buttonStyle' => 'basic'
])
@endpagination

API

Parameter	Default	Type	Description
list	[]	array	-
current	1	integer	-
currentClass	--is-active	string	-
componentElement	nav	string	-
listElement	ul	string	-
listItem	li	string	-
linkPrefix	?pagination=	string	-
anchorTag		string	-
previousDisabled	false	string	-
nextDisabled	false	string	-
useJS	false	boolean	-
randomizeOrder	false	boolean	-
perPage	10	integer	-
maxPages	false	boolean	-
buttonStyle	filled	string	-
buttonSize	sm	string	-
pagesToShow	false	boolean	-
keepDOM	false	boolean	-
async	false	boolean	-

CSS API

Variable	Default	Type	Values	Description
--c-pagination--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-pagination--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.

Similar components

Option Icon Section Icon