@clayui/pagination

---

title: 'Pagination' description: 'Pagination provides horizontal navigation between chunks(pages) of a dataset.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/pagination/' packageNpm: '@clayui/pagination' sibling: 'docs/components/css-pagination.html'

import { Pagination, PaginationWithBasicItems, } from '$packages/clay-pagination/docs/index';

• Numbered Pagination
• API

You can use ClayPagination.Ellipsis to display a dropdown with the specified page numbers as the dropdown's options.

ClayPagination.Item renders a basic Pagination item with content you provide.

Combining these you can reach the following result:

Numbered Pagination

If you want to have a simple Pagination with integers as Pagination items you can use a simpler variant, PaginationWithBasicItems as you can see below:

API

ClayPagination

[APITable "clay-pagination/src/Pagination.tsx"]

ClayPagination.Ellipsis

[APITable "clay-pagination/src/Ellipsis.tsx"]

ClayPagination.Item

[APITable "clay-pagination/src/Item.tsx"]

ClayPaginationWithBasicItems

[APITable "clay-pagination/src/PaginationWithBasicItems.tsx"]