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 id="61efad7be0707" class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="61efad7be0703">
    <ul class="c-pagination__list">
        <button id="61efad7be07494.27931244" class="c-button c-pagination__item--previous c-pagination__item c-button__basic c-button__basic--primary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" disabled="true" js-pagination-prev="" type="button" aria-pressed="false" data-uid="61efad7be0757">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efad7be07a7" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efad7be07a3">
                    chevron_left
            </i>
        
                    
            
    </span>
</button>
        
        <div class="u-display--flex" js-table-pagination--links>

               
                    <li class="c-pagination__item c-pagination__item--is-active" js-pagination-index="1">
            <a class="c-pagination__link" href="/components/organisms/pagination?pagination=1" aria-label="1" aria-current="true">
              <span class="c-pagination__label">
                1
              </span>
            </a>
          </li>
                         
                    <li class="c-pagination__item" js-pagination-index="2">
            <a class="c-pagination__link" href="/components/organisms/pagination?pagination=2" aria-label="2">
              <span class="c-pagination__label">
                2
              </span>
            </a>
          </li>
                         
                    <li class="c-pagination__item" js-pagination-index="3">
            <a class="c-pagination__link" href="/components/organisms/pagination?pagination=3" aria-label="3">
              <span class="c-pagination__label">
                3
              </span>
            </a>
          </li>
                         
                    <li class="c-pagination__item" js-pagination-index="4">
            <a class="c-pagination__link" href="/components/organisms/pagination?pagination=4" aria-label="4">
              <span class="c-pagination__label">
                4
              </span>
            </a>
          </li>
                         
                    <li class="c-pagination__item" js-pagination-index="5">
            <a class="c-pagination__link" href="/components/organisms/pagination?pagination=5" aria-label="5">
              <span class="c-pagination__label">
                5
              </span>
            </a>
          </li>
                          </div>

        <!-- icon.blade.php -->
    <i id="61efad7be0de3" class="c-icon c-icon--size-md material-icons" style="line-height: 40px;" translate="no" role="img" alt="" data-uid="61efad7be0dda">
                    more_horiz
            </i>

<li class="c-pagination__item">
    <a class="c-pagination__link" href="/components/organisms/pagination?pagination=15" aria-label="Page 15">
        <span class="c-pagination__label">
            15
        </span>
    </a>
</li>
        <a id="61efad7be0e373.59016987" class="c-button c-pagination__item--next c-pagination__item c-button__basic c-button__basic--primary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="?pagination=2" target="_top" disabled="false" js-pagination-next="" type="button" data-uid="61efad7be0e47">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efad7be0eaf" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efad7be0eab">
                    chevron_right
            </i>
        
                    
            
    </span>
</a>
    </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

Pagination outlined

<!-- pagination.blade.php -->
<nav id="61efad7be1073" class="c-pagination c-pagination--outlined" role="navigation" aria-label="Pagination Navigation" data-uid="61efad7be106f">
    <ul class="c-pagination__list">
        <button id="61efad7be10b91.88141085" class="c-button c-pagination__item--previous c-pagination__item c-button__basic c-button__basic--primary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" disabled="true" js-pagination-prev="" type="button" aria-pressed="false" data-uid="61efad7be10c9">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efad7be111b" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efad7be1117">
                    chevron_left
            </i>
        
                    
            
    </span>
</button>
        
        <div class="u-display--flex" js-table-pagination--links>

               
                    <li class="c-pagination__item c-pagination__item--is-active" js-pagination-index="1">
            <a class="c-pagination__link" href="/components/organisms/pagination?pagination=1" aria-label="1" aria-current="true">
              <span class="c-pagination__label">
                1
              </span>
            </a>
          </li>
                         
                    <li class="c-pagination__item" js-pagination-index="2">
            <a class="c-pagination__link" href="/components/organisms/pagination?pagination=2" aria-label="2">
              <span class="c-pagination__label">
                2
              </span>
            </a>
          </li>
                         
                    <li class="c-pagination__item" js-pagination-index="3">
            <a class="c-pagination__link" href="/components/organisms/pagination?pagination=3" aria-label="3">
              <span class="c-pagination__label">
                3
              </span>
            </a>
          </li>
                         
                    <li class="c-pagination__item" js-pagination-index="4">
            <a class="c-pagination__link" href="/components/organisms/pagination?pagination=4" aria-label="4">
              <span class="c-pagination__label">
                4
              </span>
            </a>
          </li>
                         
                    <li class="c-pagination__item" js-pagination-index="5">
            <a class="c-pagination__link" href="/components/organisms/pagination?pagination=5" aria-label="5">
              <span class="c-pagination__label">
                5
              </span>
            </a>
          </li>
                          </div>

        <!-- icon.blade.php -->
    <i id="61efad7be11da" class="c-icon c-icon--size-md material-icons" style="line-height: 40px;" translate="no" role="img" alt="" data-uid="61efad7be11d4">
                    more_horiz
            </i>

<li class="c-pagination__item">
    <a class="c-pagination__link" href="/components/organisms/pagination?pagination=15" aria-label="Page 15">
        <span class="c-pagination__label">
            15
        </span>
    </a>
</li>
        <a id="61efad7be12247.53621654" class="c-button c-pagination__item--next c-pagination__item c-button__basic c-button__basic--primary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="?pagination=2" target="_top" disabled="false" js-pagination-next="" type="button" data-uid="61efad7be1232">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efad7be127e" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efad7be127b">
                    chevron_right
            </i>
        
                    
            
    </span>
</a>
    </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,
    'classList' => [
        "c-pagination--outlined"
        ]
])
@endpagination

Using JS

Simple pagination

Item 1
Item 2
Item 3

Easier pagination

With just a few added attributes you can have pagnation made for you

<!-- card.blade.php -->
<div href="" id="61efad7be1805" class="c-card c-card--default c-card--ratio-4-3" js-pagination-target="" data-uid="61efad7be1802">
    
    <div class="c-card__header">
        <!-- typography.blade.php  -->
<h4 id="61efad7be1444" class="c-typography c-typography__variant--p" data-uid="61efad7be1441">
    Simple pagination
</h4>    </div>


    <!-- collection.blade.php -->
<div id="61efad7be15e2" class="c-collection" js-pagination-container="" data-uid="61efad7be15df">
    
    
            <!-- collection__item.blade.php -->
<div id="61efad7be14ce" class="c-collection__item" js-pagination-item="" data-uid="61efad7be14cb">
    
    
            <div class="c-collection__content">
            Item 1
        </div>
    
    
    </div>
        <!-- collection__item.blade.php -->
<div id="61efad7be1527" class="c-collection__item" js-pagination-item="" data-uid="61efad7be1524">
    
    
            <div class="c-collection__content">
            Item 2
        </div>
    
    
    </div>
        <!-- collection__item.blade.php -->
<div id="61efad7be1568" class="c-collection__item" js-pagination-item="" data-uid="61efad7be1565">
    
    
            <div class="c-collection__content">
            Item 3
        </div>
    
    
    </div>
    </div>
    <!-- pagination.blade.php -->
<nav id="61efad7be163c" class="c-pagination" role="navigation" aria-label="Pagination Navigation" js-pagination="" js-pagination-per-page="2" js-pagination-max-pages="" data-uid="61efad7be1638">
    <ul class="c-pagination__list">
        <button id="61efad7be167b6.10365540" class="c-button c-pagination__item--previous c-pagination__item c-button__basic c-button__basic--primary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" disabled="true" js-pagination-prev="" type="button" aria-pressed="false" data-uid="61efad7be1689">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efad7be16d6" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efad7be16d3">
                    chevron_left
            </i>
        
                    
            
    </span>
</button>
        
        <div class="u-display--flex" js-table-pagination--links>

               
                    <li class="c-pagination__item c-pagination__item--is-active" js-pagination-index="1">
            <a class="c-pagination__link" href="?pagination=1" aria-label="1" aria-current="true">
              <span class="c-pagination__label">
                1
              </span>
            </a>
          </li>
                          </div>

        
        <button id="61efad7be172c9.04096889" class="c-button c-pagination__item--next c-pagination__item c-button__basic c-button__basic--primary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" disabled="true" js-pagination-next="" type="button" aria-pressed="false" data-uid="61efad7be1739">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efad7be1784" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efad7be1780">
                    chevron_right
            </i>
        
                    
            
    </span>
</button>
    </ul>
</nav>
</div>
@card([
    'attributeList' => [
        'js-pagination-target' => ''
    ]
])
    <div class="c-card__header">
        @typography([
            'element' => "h4"
        ])
            Simple pagination
        @endtypography
    </div>


    @collection(['attributeList' => ['js-pagination-container' => '']])
        @collection__item(['attributeList' => ['js-pagination-item' => '']])
            Item 1
        @endcollection__item

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

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

    @pagination([
        'list' => [
            ['href' => '?pagination=1', 'label' => 'Page 1'],
        ],
        'current' => 1,
        'useJS' => true,
        'perPage' => 2,
    ])
    @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
perPage 10 integer - How many items per page
maxPages false boolean - Maximum amount of pages
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: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Pagination/pagination.json