Overview
The pagination component helps users navigate through multiple pages of content by providing clear page controls. It allows for server-side rendering of the initial state to support SEO, and offers interactive navigation for users via browser or custom handlers.
Basic usage
Importing the component
To use the pagination component, import it from the design system package along with its associated styles.
import { DsPagination } from "@coloplast/design-system";
import "@coloplast/design-system/dist/components/pagination/ds-pagination.css";
Example usage
For server-side rendering, provide static HTML within the component. The Vue component will handle dynamic functionality like additional pages for desktop view.
<DsPagination>
<div class="ds-pagination">
<nav aria-label="Pagination" class="ds-pagination__nav">
<!-- Previous page button -->
<a
class="ds-icon-button ds-icon-button--secondary ds-icon-button--sm"
aria-label="Previous"
href="?page=1"
>
<ds-icon icon-name="chevron-left"></ds-icon>
</a>
<!-- Pagination list -->
<ul class="ds-pagination__list">
<!-- Loop over the page numbers -->
<li>
<!-- The tag helper will return static HTML -->
<ds-button
class="ds-pagination__num ds-button--padding-compact"
href="?page=1"
variant="link"
size="md"
>
<span class="ds-visually-hidden">Page</span> 1
</ds-button>
</li>
<!-- Render the truncation indicators like this -->
<li>
<div class="ds-pagination__truncator">…</div>
</li>
</ul>
<!-- Next page button -->
<a
class="ds-icon-button ds-icon-button--secondary ds-icon-button--sm"
aria-label="Next"
href="?page=2"
>
<ds-icon icon-name="chevron-right"></ds-icon>
</a>
</nav>
<div
ds-text-type="label-sm"
ds-text-style="regular"
class="ds-pagination__results"
aria-live="polite"
>41 - 50 of 99 results</div>
</div>
</DsPagination>
Component playground and props
Explore the different properties and configurations for the pagination component using the Storybook playground. You can dynamically modify the number of pages, results per page, and URLs.
Accessibility
The pagination component includes several accessibility features:
- Navigation semantics: The <nav> element signals to assistive technologies that this is a form of navigation, with an aria-label to clarify the purpose.
- ARIA integration: Each page number is rendered as an anchor with an accessible label using visually hidden text. The current page is marked with aria-current.
- Keyboard navigation: All links are fully accessible via keyboard navigation.
- Live region updates: The results feedback includes an aria-live="polite" attribute, ensuring that users are informed when the results update without overwhelming them.
Internationalisation
The pagination component supports right-to-left (RTL) rendering. Labels and feedback text can be customised for different languages, and the labelResults prop allows token replacement for dynamic phrasing across different locales.
SEO
Server-side rendering of the initial pagination is crucial for SEO, as it allows search engines to crawl through the initial state of pagination. Consider integrating pagination directly into the page for improved SEO.