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="6740765ab9ebd">
    <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=10&pagination=11" data-uid="6740765ab9ef0">   
     <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="6740765ab9f23">
                    </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="6740765ab9f76">   
     <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="6740765ab9faa">
                    </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="9">
                            <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=9" aria-label="9" data-uid="6740765ab9feb">   
     <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="6740765aba01f">   
     <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-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=11" aria-label="11" data-uid="6740765aba04f">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                11
            </span>
        
    </span> </a>                    </li>
                                    <li class="c-pagination__item" data-js-pagination-index="12">
                            <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=12" aria-label="12" data-uid="6740765aba07d">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                12
            </span>
        
    </span> </a>                    </li>
                                    <li class="c-pagination__item" data-js-pagination-index="13">
                            <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=13" aria-label="13" data-uid="6740765aba0a9">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                13
            </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="6740765aba0f2">
                    </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="6740765aba123">   
     <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=12&pagination=11" data-uid="6740765aba154">   
     <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="6740765aba181">
                    </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
])
@endpagination

Using JS

Easier pagination

Simple pagination

Showing all pages in the pagination at the same time.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

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

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

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

Item 8
Item 9
Item 3
Item 4
Item 5
Item 1
Item 2
Item 6
Item 7 
<!-- 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="6740765aba553">
        <div class="c-card__header">
            <!-- typography.blade.php   original: h4 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="6740765aba209">
    Simple pagination
</h2>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6740765aba236">
    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="6740765aba3d1">
    
    
            <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6740765aba27b">
    
    
    
     
            <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="6740765aba2a7">
    
    
    
     
            <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="6740765aba2cb">
    
    
    
     
            <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="6740765aba2ec">
    
    
    
     
            <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="6740765aba30c">
    
    
    
     
            <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="6740765aba32c">
    
    
    
     
            <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="6740765aba34c">
    
    
    
     
            <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="6740765aba36c">
    
    
    
     
            <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="6740765aba38b">
    
    
    
     
            <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="6740765aba3ff">
    <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="6740765aba42f">   
     <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="6740765aba45e">
                    </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="6740765aba49c">   
     <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="6740765aba4cf">   
     <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="6740765aba4fb">
                    </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="6740765aba85a">
        <div class="c-card__header">
            <!-- typography.blade.php   original: h4 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="6740765aba588">
    Pagination with pagesToShow attribute.
</h3>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6740765aba5ad">
    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="6740765aba6f5">
    
    
            <!-- collection__item.blade.php -->
<div class="c-collection__item c-collection__item--show-icon" data-js-pagination-item="" data-uid="6740765aba5d3">
    
    
    
     
            <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="6740765aba5f8">
    
    
    
     
            <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="6740765aba61a">
    
    
    
     
            <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="6740765aba63a">
    
    
    
     
            <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="6740765aba659">
    
    
    
     
            <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="6740765aba679">
    
    
    
     
            <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="6740765aba697">
    
    
    
     
            <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="6740765aba6b6">
    
    
    
     
            <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="6740765aba6d4">
    
    
    
     
            <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="6740765aba71b">
    <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="6740765aba74a">   
     <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="6740765aba777">
                    </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="6740765aba7bc">   
     <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="6740765aba7f0">   
     <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="6740765aba81b">
                    </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="6740765abaed7">
        <div class="c-card__header">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6740765aba888">
    Pagination with pagesToShow attribute.
</h4>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6740765aba8ad">
    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="6740765aba8f4" data-js-toggle-item="6740765aba8f4-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="6740765aba904">
    
            <label class="c-field__label" for="select_6740765aba8f4">
            Sort by
                            
                <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
    
        <div class="c-select__field-container">
        
        <select id="select_6740765aba8f4" 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="6740765aba973">
                    </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="6740765aba9a7">
                    </span>
</div>                <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="6740765aba8f4-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="6740765abaa1e">
                    </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="6740765abaa4f">
                    </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="6740765abaa91">
                    </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="6740765abaabf">
                    </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="6740765abab01">
                    </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="6740765abab2e">
                    </span>
    <span class="c-select__option-label">Random</span>
</li>        </ul>
</div>    <div class="c-select__select-invalid-message" id="error_input_6740765aba8f4_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="6740765abab75">
                    </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="6740765ababbb">
                    </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="6740765ababe9">
                    </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="6740765abad45">
    
    
            <!-- 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="6740765abac1a">
    
    
    
     
            <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="6740765abac40">
    
    
    
     
            <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="6740765abac63">
    
    
    
     
            <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="6740765abac84">
    
    
    
     
            <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="6740765abaca5">
    
    
    
     
            <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="6740765abacc5">
    
    
    
     
            <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="6740765abace4">
    
    
    
     
            <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="6740765abad04">
    
    
    
     
            <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="6740765abad23">
    
    
    
     
            <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="6740765abad82">
    <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="6740765abadb6">   
     <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="6740765abadea">
                    </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="6740765abae2f">   
     <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="6740765abae67">   
     <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="6740765abae99">
                    </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
@endcard

Blade 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.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Pagination/pagination.json