The paging component provides navigation through pages, typically using next and previous buttons or page numbers.
It lets users easily navigate through pages of content, keeping the page controls visible at all times. You can also customise the number of items displayed per page for better organisation. With several configuration options, you have precise control over how the paging behaves to suit your needs.
When to use this component
Use the paging component when you have a large set of content that you want to break up into smaller, more manageable sections. This is particularly useful for displaying long lists of items, such as articles, products, or search results, in a space-efficient way. Aim for a reasonable number of items per page to ensure a smooth navigation experience without overwhelming the user.
If your content needs to be viewed all at once or if users need to interact with each section independently, consider using alternative components like a grid or list layout instead.
The paging component is a great choice when you need to display content across multiple pages without overwhelming the layout, especially when vertical space is limited or content is too extensive for a single view.
Examples in GOSS products
- List template to use paging to display articles and items across multiple pages for easy navigation
- Search template to implement paging to limit the number of items shown per page, improving search results and user experience
- Self-Service, Assisted Service, and Task Management to use paging to organise results and ensure manageable sections of data for users to navigate
- Case Search to apply paging to display case results efficiently, ensuring users can easily find and navigate through cases
Accessibility considerations
This paging component is designed with accessibility in mind, offering an easy and inclusive experience for everyone. It follows best practices to ensure smooth navigation, with plenty of configuration options to meet different needs.
Each page is clearly labelled, making it simple for users to see where they are and move through the content.
When focused, the paging controls show a clear highlight, helping users easily spot the active page and navigate through the pages effortlessly.
Basic paging
A paging component with no additional configuration options, iterating over a typical content collection.
By default, the paging component displays a set number of items per page, with navigation controls to move between pages.
Each paging component must include a collection of items to display in the items attribute, and a var attribute to refer to each item on the current page.
<ul id="c_24540397418843" class="paging" data-previous="Previous" data-next="Next" data-collapse-type="list" data-collapsed="true" data-collapsible="false">
<li class="paging__item paging__item--previous">
<a href="./?p=49&direction=previous" class="paging__link paging__link--previous" data-page="49"><span class="paging__value">Previous<span class="accessibility"> page</span></span></a>
</li>
<li class="paging__item paging__item--first paging__item--always-has-hidden paging__item--current-5 paging__item--has-hidden">
<a href="./?p=1" class="paging__link" aria-label="Page 1" data-page="1"><span class="paging__value">1</span></a>
</li>
<li class="paging__item paging__item--current-4">
<a href="./?p=46" class="paging__link" aria-label="Page 46" data-page="46"><span class="paging__value">46</span></a>
</li>
<li class="paging__item paging__item--current-3">
<a href="./?p=47" class="paging__link" aria-label="Page 47" data-page="47"><span class="paging__value">47</span></a>
</li>
<li class="paging__item paging__item--current-2">
<a href="./?p=48" class="paging__link" aria-label="Page 48" data-page="48"><span class="paging__value">48</span></a>
</li>
<li class="paging__item paging__item--current-1">
<a href="./?p=49" class="paging__link" aria-label="Page 49" data-page="49"><span class="paging__value">49</span></a>
</li>
<li class="paging__item paging__item--current">
<span class="paging__text"><span class="paging__value">50</span></span>
</li>
<li class="paging__item paging__item--current-1">
<a href="./?p=51" class="paging__link" aria-label="Page 51" data-page="51"><span class="paging__value">51</span></a>
</li>
<li class="paging__item paging__item--current-2">
<a href="./?p=52" class="paging__link" aria-label="Page 52" data-page="52"><span class="paging__value">52</span></a>
</li>
<li class="paging__item paging__item--current-3">
<a href="./?p=53" class="paging__link" aria-label="Page 53" data-page="53"><span class="paging__value">53</span></a>
</li>
<li class="paging__item paging__item--current-4">
<a href="./?p=54" class="paging__link" aria-label="Page 54" data-page="54"><span class="paging__value">54</span></a>
</li>
<li class="paging__item paging__item--current-5">
<a href="./?p=55" class="paging__link" aria-label="Page 55" data-page="55"><span class="paging__value">55</span></a>
</li>
<li class="paging__item paging__item--last paging__item--always-has-hidden paging__item--current-6 paging__item--has-hidden">
<a href="./?p=100" class="paging__link" aria-label="Page 100" data-page="100"><span class="paging__value">100</span></a>
</li>
<li class="paging__item paging__item--select">
<form action="https://notheme.goscre1-dev.gosshosted.com/frontendmocks?type=component&subtype=paging&test=0">
<label for="c_24540397418843_select" class="paging__select-label">Page</label>
<select id="c_24540397418843_select" name="p" class="paging__select">
<option value="1" class="paging__option" data-url="./?p=1">1</option>
<option value="46" class="paging__option" data-url="./?p=46">46</option>
<option value="47" class="paging__option" data-url="./?p=47">47</option>
<option value="48" class="paging__option" data-url="./?p=48">48</option>
<option value="49" class="paging__option" data-url="./?p=49">49</option>
<option value="50" class="paging__option" selected="selected" data-url="./?p=50">50</option>
<option value="51" class="paging__option" data-url="./?p=51">51</option>
<option value="52" class="paging__option" data-url="./?p=52">52</option>
<option value="53" class="paging__option" data-url="./?p=53">53</option>
<option value="54" class="paging__option" data-url="./?p=54">54</option>
<option value="55" class="paging__option" data-url="./?p=55">55</option>
<option value="100" class="paging__option" data-url="./?p=100">100</option>
</select>
<span class="paging__select-label">of 100</span>
<input type="submit" value="Navigate to selected page" class="accessibility">
</form>
</li>
<li class="paging__item paging__item--expand">
<button class="paging__link paging__link--expand">
<span class="paging__value paging__value--ellipsis"><span class="accessibility">Toggle hidden pages</span></span>
</button>
</li>
<li class="paging__item paging__item--next">
<a href="./?p=51&direction=next" class="paging__link paging__link--next" data-page="51"><span class="paging__value">Next<span class="accessibility"> page</span></span></a>
</li>
</ul>
<script>gi.responsive_paging.initialise("c_24540397418843")</script><comp:paging totalItems="100" baseAddress="#{article.articleAbsoluteURL}" currentPage="50" />Paging with displayPages
The number of page links to be shown in the Paging component can be controlled via the displayPages attribute.
<ul id="c_12964294781549" class="paging" data-previous="Previous" data-next="Next" data-collapse-type="list">
<li class="paging__item paging__item--previous">
<a href="./?p=4&direction=previous" class="paging__link paging__link--previous" data-page="4"><span class="paging__value">Previous<span class="accessibility"> page</span></span></a>
</li>
<li class="paging__item paging__item--first paging__item--always-has-hidden">
<a href="./?p=1" class="paging__link" aria-label="Page 1" data-page="1"><span class="paging__value">1</span></a>
</li>
<li class="paging__item">
<a href="./?p=4" class="paging__link" aria-label="Page 4" data-page="4"><span class="paging__value">4</span></a>
</li>
<li class="paging__item paging__item--current">
<span class="paging__text"><span class="paging__value">5</span></span>
</li>
<li class="paging__item">
<a href="./?p=6" class="paging__link" aria-label="Page 6" data-page="6"><span class="paging__value">6</span></a>
</li>
<li class="paging__item paging__item--last paging__item--always-has-hidden">
<a href="./?p=10" class="paging__link" aria-label="Page 10" data-page="10"><span class="paging__value">10</span></a>
</li>
<li class="paging__item paging__item--select">
<form action="./">
<label for="c_12964294781549_select" class="paging__select-label">Page</label>
<select id="c_12964294781549_select" name="p" class="paging__select">
<option value="1" class="paging__option" data-url="/&p=1">1</option>
<option value="4" class="paging__option" data-url="/&p=4">4</option>
<option value="5" class="paging__option" selected="selected" data-url="/&p=5">5</option>
<option value="6" class="paging__option" data-url="/&p=6">6</option>
<option value="10" class="paging__option" data-url="/&p=10">10</option>
</select>
<span class="paging__select-label">of 10</span>
<input type="submit" value="Navigate to selected page" class="accessibility" />
</form>
</li>
<li class="paging__item paging__item--expand">
<button class="paging__link paging__link--expand">
<span class="paging__value paging__value--ellipsis"><span class="accessibility">Toggle hidden pages</span></span>
</button>
</li>
<li class="paging__item paging__item--next">
<a href="./?p=6&direction=next" class="paging__link paging__link--next" data-page="6"><span class="paging__value">Next<span class="accessibility"> page</span></span></a>
</li>
</ul>
<script>gi.responsive_paging.initialise("c_12964294781549")</script><comp:paging totalItems="100" baseAddress="#{article.articleAbsoluteURL}" currentPage="5" displayPages="5" />Paging with pageSize
The number of items to be shown per page can be controlled using the pageSize attribute. The default is 10.
<ul id="c_14524939466084" class="paging" data-previous="Previous" data-next="Next" data-collapse-type="list">
<li class="paging__item paging__item--previous paging__item--disabled">
<span class="paging__text paging__text--previous"><span class="paging__value">Previous<span class="accessibility"> page</span></span></span>
</li>
<li class="paging__item paging__item--first paging__item--current">
<span class="paging__text"><span class="paging__value">1</span></span>
</li>
<li class="paging__item">
<a href="./?p=2" class="paging__link" aria-label="Page 2" data-page="2"><span class="paging__value">2</span></a>
</li>
<li class="paging__item">
<a href="./?p=3" class="paging__link" aria-label="Page 3" data-page="3"><span class="paging__value">3</span></a>
</li>
<li class="paging__item paging__item--last">
<a href="./?p=4" class="paging__link" aria-label="Page 4" data-page="4"><span class="paging__value">4</span></a>
</li>
<li class="paging__item paging__item--select">
<form action="https://notheme.goscre1-dev.gosshosted.com/frontendmocks?type=component&subtype=paging&test=7">
<label for="c_14524939466084_select" class="paging__select-label">Page</label>
<select id="c_14524939466084_select" name="p" class="paging__select">
<option value="1" class="paging__option" selected="selected" data-url="./?p=1">1</option>
<option value="2" class="paging__option" data-url="./?p=2">2</option>
<option value="3" class="paging__option" data-url="./?p=3">3</option>
<option value="4" class="paging__option" data-url="./?p=4">4</option>
</select>
<span class="paging__select-label">of 4</span>
<input type="submit" value="Navigate to selected page" class="accessibility" />
</form>
</li>
<li class="paging__item paging__item--expand">
<button class="paging__link paging__link--expand">
<span class="paging__value paging__value--ellipsis"><span class="accessibility">Toggle hidden pages</span></span>
</button>
</li>
<li class="paging__item paging__item--next">
<a href="./?p=2&direction=next" class="paging__link paging__link--next" data-page="2"><span class="paging__value">Next<span class="accessibility"> page</span></span></a>
</li>
</ul>
<script>gi.responsive_paging.initialise("c_14524939466084")</script><comp:paging totalItems="100" baseAddress="#{article.articleAbsoluteURL}" currentPage="1" pageSize="25" />Paging with collapseType
The responsive collapse type can be switched to using a Select input by using the collapseType attribute.
<ul id="c_15300924486145" class="paging" data-previous="Previous" data-next="Next" data-collapse-type="select">
<li class="paging__item paging__item--previous paging__item--disabled">
<span class="paging__text paging__text--previous"><span class="paging__value">Previous<span class="accessibility"> page</span></span></span>
</li>
<li class="paging__item paging__item--first paging__item--current">
<span class="paging__text"><span class="paging__value">1</span></span>
</li>
<li class="paging__item">
<a href="./?p=2" class="paging__link" aria-label="Page 2" data-page="2"><span class="paging__value">2</span></a>
</li>
<li class="paging__item">
<a href="./?p=3" class="paging__link" aria-label="Page 3" data-page="3"><span class="paging__value">3</span></a>
</li>
<li class="paging__item">
<a href="./?p=4" class="paging__link" aria-label="Page 4" data-page="4"><span class="paging__value">4</span></a>
</li>
<li class="paging__item">
<a href="./?p=5" class="paging__link" aria-label="Page 5" data-page="5"><span class="paging__value">5</span></a>
</li>
<li class="paging__item">
<a href="./?p=6" class="paging__link" aria-label="Page 6" data-page="6"><span class="paging__value">6</span></a>
</li>
<li class="paging__item">
<a href="./?p=7" class="paging__link" aria-label="Page 7" data-page="7"><span class="paging__value">7</span></a>
</li>
<li class="paging__item">
<a href="./?p=8" class="paging__link" aria-label="Page 8" data-page="8"><span class="paging__value">8</span></a>
</li>
<li class="paging__item">
<a href="./?p=9" class="paging__link" aria-label="Page 9" data-page="9"><span class="paging__value">9</span></a>
</li>
<li class="paging__item paging__item--last">
<a href="./?p=10" class="paging__link" aria-label="Page 10" data-page="10"><span class="paging__value">10</span></a>
</li>
<li class="paging__item paging__item--select">
<form action="https://notheme.goscre1-dev.gosshosted.com/frontendmocks?type=component&subtype=paging&test=4">
<label for="c_15300924486145_select" class="paging__select-label">Page</label>
<select id="c_15300924486145_select" name="p" class="paging__select">
<option value="1" class="paging__option" selected="selected" data-url="./?p=1">1</option>
<option value="2" class="paging__option" data-url="./?p=2">2</option>
<option value="3" class="paging__option" data-url="./?p=3">3</option>
<option value="4" class="paging__option" data-url="./?p=4">4</option>
<option value="5" class="paging__option" data-url="./?p=5">5</option>
<option value="6" class="paging__option" data-url="./?p=6">6</option>
<option value="7" class="paging__option" data-url="./?p=7">7</option>
<option value="8" class="paging__option" data-url="./?p=8">8</option>
<option value="9" class="paging__option" data-url="./?p=9">9</option>
<option value="10" class="paging__option" data-url="./?p=10">10</option>
</select>
<span class="paging__select-label">of 10</span>
<input type="submit" value="Navigate to selected page" class="accessibility" />
</form>
</li>
<li class="paging__item paging__item--expand">
<button class="paging__link paging__link--expand">
<span class="paging__value paging__value--ellipsis"><span class="accessibility">Toggle hidden pages</span></span>
</button>
</li>
<li class="paging__item paging__item--next">
<a href="./?p=2&direction=next" class="paging__link paging__link--next" data-page="2"><span class="paging__value">Next<span class="accessibility"> page</span></span></a>
</li>
</ul>
<script>gi.responsive_paging.initialise("c_15300924486145")</script><comp:paging totalItems="100" baseAddress="#{article.articleAbsoluteURL}" currentPage="1" collapseType="select" />
