Pagination

A fully accessible and customizable pagination component for navigating through pages.

Introduction

The Pagination component is an accessible and flexible tool for navigating multi-page content. It includes features such as previous/next navigation, page numbers, ellipsis, and ARIA attributes for accessibility.

Default Use Case

Installation

Install the Pagination component:

npx axionjs-ui add pagination

File Structure

pagination.tsx

Prop Types

Prop	Type	Default
`Pagination`	`React.ComponentProps<'nav'>`	-
`PaginationContent`	`React.ComponentProps<'ul'>`	-
`PaginationItem`	`React.ComponentProps<'li'>`	-
`PaginationLink`	`React.ComponentProps<'a'> & { isActive?: boolean; size?: string; }`	-
`PaginationPrevious`	`React.ComponentProps<typeof PaginationLink>`	-
`PaginationNext`	`React.ComponentProps<typeof PaginationLink>`	-
`PaginationEllipsis`	`React.ComponentProps<'span'>`	-

Features

Simple Navigation:
- Navigate through pages with “Previous”, “Next”, and page numbers.
Advanced Customization:
- Add ellipsis for skipped pages or active state for the current page.
Fully Accessible:
- Built-in ARIA roles and screen-reader-friendly descriptions.

Accessibility

Keyboard Navigation:
- Use Tab and arrow keys to move through pagination items.
Screen Reader Support:
- ARIA labels (aria-current, aria-hidden) ensure the component is accessible.
Focus Management:
- Maintains focus state for smoother navigation.

Conclusion

The Pagination component is a flexible and accessible solution for navigating multi-page content. Its ARIA support and customizable design make it ideal for modern web applications.