Pagination
The Pagination component is a user interface element used for navigating through a list of content spread across multiple pages. It allows users to easily move between pages and access specific content without overwhelming them with all the data at once.
Introduction
The Pagination component is a user interface element used to navigate through a list of content, typically displayed across multiple pages. It provides a more organized and user-friendly way to handle large sets of data by breaking it down into manageable chunks.
Visual representation
The following element is a visual representation of the pagination component.
Code structure
The ` .aegov-pagination ` class is placed on the wrapper element encompassing the pagination.
<div class="flex items-center justify-center">
<!-- Code for Mobile Pagination -->
<div class="aegov-pagination flex flex-1 justify-between items-center sm:hidden">
<a class="aegov-pagination-previous" href="#">
<svg aria-hidden="true" class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none" />
<polyline points="160 208 80 128 160 48" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
</svg>
<span>Previous</span>
</a>
<span class="pages">Page 10 of 13</span>
<a class="aegov-pagination-next" href="#">
<span>Next</span>
<svg aria-hidden="true" class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none" />
<polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
</svg>
</a>
</div>
<!-- Code for Desktop Pagination-->
<div class="aegov-pagination max-sm:hidden" role="navigation">
<a class="aegov-pagination-previous" rel="prev" aria-label="Previous Page" href="#">
<svg aria-hidden="true" class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none" />
<polyline points="160 208 80 128 160 48" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
</svg>
<span>Previous</span>
</a>
<a class="aegov-pagination-page aegov-pagination-smaller" title="Page 1" href="#">1</a>
<a class="aegov-pagination-page aegov-pagination-smaller" title="Page 2" href="#">2</a>
<span aria-current="page" class="aegov-pagination-current">3</span>
<a class="aegov-pagination-page aegov-pagination-larger" title="Page 4" href="#">4</a>
<a class="aegov-pagination-page aegov-pagination-larger" title="Page 5" href="#">5</a>
<span class="aegov-pagination-extend">...</span>
<a class="aegov-pagination-page aegov-pagination-larger" title="Page 17" href="#">17</a>
<a class="aegov-pagination-next" rel="next" aria-label="Next Page" href="#">
<span>Next</span>
<svg aria-hidden="true" class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none" />
<polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
</svg>
</a>
</div>
</div>
Variations
Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.
Pagination with First and Last Link
The pagination component includes first and last links, providing users with easier navigation and enhanced user experience when browsing through multiple pages of content. This addition simplifies the process of accessing the first and last pages, ensuring a smoother and more efficient user interaction.
Behaviour
The behavior of a pagination component revolves around user interaction, primarily through clicks or taps.
-
The pagination component displays a set of links to navigate between different pages of content.
-
Clicking on the "Previous" link moves the user to the previous page, and clicking on the "Next" link moves the user to the next page.
-
Clicking on a specific page number link takes the user directly to that page.
-
The component displays an ellipsis (...) to represent skipped page numbers between the displayed pages for better UI when there are many pages.
-
On mobile devices, the pagination displays the "Previous" and "Next" links along with the current page number in a compact format for improved responsiveness.
Accessibility
-
All links in the pagination component are marked up with appropriate anchor tags (
<a>) to ensure screen readers can identify them as clickable elements. -
The "Previous" and "Next" links include descriptive text, such as "Previous Page" and "Next Page," respectively, provided via the
` aria-label `attribute to provide context for screen reader users. -
The current page number is marked with the
` aria-current `attribute, indicating its current state to screen reader users. -
The pagination component follows a logical order in the HTML markup, ensuring proper reading order for screen readers and other assistive technologies.
Responsive element
This component can be resized based on breakpoint prefixes.
You can always control the responsive nature of a component by adding the screen size attribute and changing the size of an element per screen size. Read more about Responsive Design and how to use breakpoint prefix for classes on TailwindCSS.com
Hence, this component's size variations can be combined with breakpoint prefixes to control the size of the component on various screensizes.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Usage
pagination is used to split search results into multiple pages, allowing users to explore listings systematically.
Where to use a pagination?
- Implement pagination for search results to help users explore and navigate through large sets of search listings, ensuring they can find the information they need efficiently.
- Use pagination in sections containing archives of government documents, reports, or publications, making it easier for users to browse and access historical records or research materials.
- For a websites that regularly publish news articles and press releases, paginate news archives so that users can access past news items chronologically.
- In data-intensive sections where government websites provide tables or databases with large datasets, pagination simplifies data exploration and analysis, ensuring that users can view data incrementally.
