Pagination
Important notice: The pagination component will not remove pages from the index if it overflows. Please trtuncate your array before sending it into list parameter.
Pagination
<!-- pagination.blade.php -->
<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="6743252c1e92a">
<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" target="_top" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" type="button" href="?p=components%2Forganisms%2Fpagination&%3Fpagination%3D=8&pagination=9" data-uid="6743252c1e96c">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1e9ad">
</span>
</span>
</span> </a> </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" target="_top" aria-label="1" type="button" href="/components/organisms/pagination?pagination=1" data-uid="6743252c1ea18">
<span class="c-button__label">
<span class="c-button__label-text ">
1
</span>
</span> </a></li>
<li class="c-pagination__item u-display--none@xs">
<!-- icon.blade.php -->
<span class="c-icon c-icon--more-horiz c-icon--material c-icon--material-more_horiz material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" material-symbol="more_horiz" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="6743252c1ea5d">
</span>
</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="7">
<a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=7" aria-label="7" data-uid="6743252c1eaa7">
<span class="c-button__label">
<span class="c-button__label-text ">
7
</span>
</span> </a> </li>
<li class="c-pagination__item" data-js-pagination-index="8">
<a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=8" aria-label="8" data-uid="6743252c1eae8">
<span class="c-button__label">
<span class="c-button__label-text ">
8
</span>
</span> </a> </li>
<li class="c-pagination__item" data-js-pagination-index="9">
<a class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=9" aria-label="9" data-uid="6743252c1eb24">
<span class="c-button__label">
<span class="c-button__label-text ">
9
</span>
</span> </a> </li>
<li class="c-pagination__item" data-js-pagination-index="10">
<a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=10" aria-label="10" data-uid="6743252c1eb5f">
<span class="c-button__label">
<span class="c-button__label-text ">
10
</span>
</span> </a> </li>
<li class="c-pagination__item" data-js-pagination-index="11">
<a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=11" aria-label="11" data-uid="6743252c1eba0">
<span class="c-button__label">
<span class="c-button__label-text ">
11
</span>
</span> </a> </li>
</ul>
</li>
<li class="c-pagination__item u-display--none@xs">
<!-- icon.blade.php -->
<span class="c-icon c-icon--more-horiz c-icon--material c-icon--material-more_horiz material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" material-symbol="more_horiz" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="6743252c1ec00">
</span>
</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" target="_top" aria-label="15" type="button" href="/components/organisms/pagination?pagination=15" data-uid="6743252c1ec3f">
<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" target="_top" disabled="false" data-js-pagination-next="" aria-label="chevron_right" type="button" href="?p=components%2Forganisms%2Fpagination&%3Fpagination%3D=10&pagination=9" data-uid="6743252c1ec7d">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1ecb6">
</span>
</span>
</span> </a> </li>
</ul>
</nav>@pagination([
'list' => [
['href' => '/components/organisms/pagination?pagination=1', 'label' => 'Page 1'],
['href' => '/components/organisms/pagination?pagination=2', 'label' => 'Page 2'],
['href' => '/components/organisms/pagination?pagination=3', 'label' => 'Page 3'],
['href' => '/components/organisms/pagination?pagination=4', 'label' => 'Page 4'],
['href' => '/components/organisms/pagination?pagination=5', 'label' => 'Page 5'],
['href' => '/components/organisms/pagination?pagination=6', 'label' => 'Page 6'],
['href' => '/components/organisms/pagination?pagination=7', 'label' => 'Page 7'],
['href' => '/components/organisms/pagination?pagination=8', 'label' => 'Page 8'],
['href' => '/components/organisms/pagination?pagination=9', 'label' => 'Page 9'],
['href' => '/components/organisms/pagination?pagination=10', 'label' => 'Page 10'],
['href' => '/components/organisms/pagination?pagination=11', 'label' => 'Page 11'],
['href' => '/components/organisms/pagination?pagination=12', 'label' => 'Page 12'],
['href' => '/components/organisms/pagination?pagination=13', 'label' => 'Page 13'],
['href' => '/components/organisms/pagination?pagination=14', 'label' => 'Page 14'],
['href' => '/components/organisms/pagination?pagination=15', 'label' => 'Page 15'],
],
'current' => isset($_GET['pagination']) ? $_GET['pagination'] : 1
])
@endpaginationUsing JS
Easier pagination
Simple pagination
Showing all pages in the pagination at the same time.
Pagination with pagesToShow attribute.
Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
Pagination with pagesToShow attribute.
Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
<!-- card.blade.php -->
<div class="c-card u-margin__bottom--8 c-card--default c-card--image-first c-card--ratio-4-3" data-js-pagination-target="" data-uid="6743252c1f1b1">
<div class="c-card__header">
<!-- typography.blade.php original: h4 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="6743252c1ed5f">
Simple pagination
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6743252c1ed98">
Showing all pages in the pagination at the same time.
</p> </div>
<!-- collection.blade.php -->
<div class="c-collection" data-js-pagination-container="" data-uid="6743252c1efb6">
<!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1edf7">
<div class="c-collection__content">
Item 1
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1ee31">
<div class="c-collection__content">
Item 2
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1ee5f">
<div class="c-collection__content">
Item 3
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1ee8a">
<div class="c-collection__content">
Item 4
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1eeb4">
<div class="c-collection__content">
Item 5
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1eedd">
<div class="c-collection__content">
Item 6
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1ef06">
<div class="c-collection__content">
Item 7
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1ef2f">
<div class="c-collection__content">
Item 8
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1ef57">
<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="" data-js-pagination-per-page="1" data-js-pagination-max-pages="0" data-js-pagination-pages-to-show="0" data-js-pagination-keep-dom="" data-uid="6743252c1eff2">
<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" target="_top" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button" data-uid="6743252c1f030">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f072">
</span>
</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" target="_top" type="button" aria-label="1" data-uid="6743252c1f0c1">
<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" target="_top" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button" data-uid="6743252c1f103">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f13c">
</span>
</span>
</span> </button> </li>
</ul>
</nav>
</div>
<!-- card.blade.php -->
<div class="c-card u-margin__bottom--8 c-card--default c-card--image-first c-card--ratio-4-3" data-js-pagination-target="" data-uid="6743252c1f59a">
<div class="c-card__header">
<!-- typography.blade.php original: h4 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="6743252c1f1f6">
Pagination with pagesToShow attribute.
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6743252c1f227">
Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
</p> </div>
<!-- collection.blade.php -->
<div class="c-collection" data-js-pagination-container="" data-uid="6743252c1f3d8">
<!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1f257">
<div class="c-collection__content">
Item 1
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1f287">
<div class="c-collection__content">
Item 2
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1f2b1">
<div class="c-collection__content">
Item 3
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1f2db">
<div class="c-collection__content">
Item 4
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1f303">
<div class="c-collection__content">
Item 5
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1f32c">
<div class="c-collection__content">
Item 6
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1f35c">
<div class="c-collection__content">
Item 7
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1f386">
<div class="c-collection__content">
Item 8
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6743252c1f3ae">
<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="" data-js-pagination-per-page="1" data-js-pagination-max-pages="0" data-js-pagination-pages-to-show="4" data-js-pagination-keep-dom="" data-uid="6743252c1f40a">
<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" target="_top" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button" data-uid="6743252c1f449">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f486">
</span>
</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" target="_top" type="button" aria-label="1" data-uid="6743252c1f4d3">
<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" target="_top" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button" data-uid="6743252c1f513">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f552">
</span>
</span>
</span> </button> </li>
</ul>
</nav>
</div>
<!-- card.blade.php -->
<div class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-js-pagination-target="" data-uid="6743252c1fdbf">
<div class="c-card__header">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6743252c1f5d4">
Pagination with pagesToShow attribute.
</h4> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6743252c1f603">
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-field c-select u-margin__bottom--4 c-select--sm c-select--singleselect is-required" data-js-pagination-sort="" id="6743252c1f65c" data-js-toggle-item="6743252c1f65c-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-uid="6743252c1f670">
<label class="c-field__label" for="select_6743252c1f65c">
Sort by
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-select__field-container">
<select id="select_6743252c1f65c" 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>
Random
</option>
</select>
<div class="c-select_focus-styler u-level-top"></div> <div class="c-select__expand-button" role="button" >
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f701">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f74d">
</span>
</div> <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="6743252c1f65c-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 -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f7ed">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f82e">
</span>
<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 -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f884">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f8bf">
</span>
<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 -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f911">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f94b">
</span>
<span class="c-select__option-label">Random</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_6743252c1f65c_message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="6743252c1f9a7">
</span>
<span class="errorText"></span>
</div>
<template>
<li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1f9f8">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1fa32">
</span>
<span class="c-select__option-label">{OPTION_NAME}</span>
</li> </template>
</div>
<!-- collection.blade.php -->
<div class="c-collection" data-js-pagination-container="" data-uid="6743252c1fc02">
<!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-js-pagination-item-title="8" data-uid="6743252c1fa70">
<div class="c-collection__content">
Item 8
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-js-pagination-item-title="9" data-uid="6743252c1faa2">
<div class="c-collection__content">
Item 9
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-js-pagination-item-title="3" data-uid="6743252c1facf">
<div class="c-collection__content">
Item 3
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-js-pagination-item-title="4" data-uid="6743252c1fafa">
<div class="c-collection__content">
Item 4
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-js-pagination-item-title="5" data-uid="6743252c1fb2f">
<div class="c-collection__content">
Item 5
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-js-pagination-item-title="1" data-uid="6743252c1fb5a">
<div class="c-collection__content">
Item 1
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-js-pagination-item-title="2" data-uid="6743252c1fb84">
<div class="c-collection__content">
Item 2
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-js-pagination-item-title="6" data-uid="6743252c1fbad">
<div class="c-collection__content">
Item 6
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-js-pagination-item-title="7" data-uid="6743252c1fbd7">
<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="" data-js-pagination-per-page="1" data-js-pagination-max-pages="0" data-js-pagination-pages-to-show="4" data-js-pagination-keep-dom="" data-uid="6743252c1fc35">
<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" target="_top" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button" data-uid="6743252c1fc72">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1fcae">
</span>
</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" target="_top" type="button" aria-label="1" data-uid="6743252c1fcfc">
<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" target="_top" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button" data-uid="6743252c1fd3d">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" aria-hidden="false" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="6743252c1fd76">
</span>
</span>
</span> </button> </li>
</ul>
</nav>
</div>@card([
'attributeList' => [
'data-js-pagination-target' => ''
],
'classList' => ['u-margin__bottom--8']
])
<div class="c-card__header">
@typography([
'element' => "h4"
])
Simple pagination
@endtypography
@typography([
])
Showing all pages in the pagination at the same time.
@endtypography
</div>
@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
@card([
'attributeList' => [
'data-js-pagination-target' => ''
],
'classList' => [
'u-margin__bottom--8'
]
])
<div class="c-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
</div>
@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
@card([
'attributeList' => [
'data-js-pagination-target' => ''
]
])
<div class="c-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
</div>
@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
@endcardBlade component parameters
| Key | Default value | Type | Available values | Description |
| list | [] | array | - | Array with pages |
| current | 1 | integer | - | current page as index number |
| currentClass | --is-active | string | - | The current classname |
| componentElement | nav | string | - | The tag for the component |
| listElement | ul | string | - | List element tag |
| listItem | li | string | - | List item tag |
| linkPrefix | ?pagination= | string | - | Pagination uses a link prefix on prev next buttons before the numeric index, add it here. |
| anchorTag | string | - | Adds the ability to add an anchor tag in the end of every link. | |
| previousDisabled | false | string | - | - |
| nextDisabled | false | string | - | - |
| useJS | false | boolean | - | If the item should use default JS to supply pagination |
| randomizeOrder | false | boolean | - | When useJS is true, this option randomize the order of the items. |
| perPage | 10 | integer | - | How many items per page |
| maxPages | false | boolean | - | Maximum amount of pages |
| buttonStyle | filled | string | - | The style of button to display |
| buttonSize | sm | string | - | Size of the buttons |
| pagesToShow | false | boolean | - | Amount of pages that is shown to the user at one time. |
| keepDOM | false | boolean | - | - |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |