@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'

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

• Numbered Pagination

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:

Changelog

3.39.0 (2021-10-29)

Bug Fixes

• @clayui/css: Adds division polyfill clay-div a function that uses / as a division operation if the function div() does not exist (87aec12)
• @clayui/css: Cadmin Dropdowns updates $dropdown-item-base keys to newer nested keys pattern and remove duplicate $dropdown-item-base (6fc1833)
• @clayui/css: Convert forward slash as division / 2 to * 0.5 as work around for dart-sass deprecation message (aa74003)
• @clayui/css: Convert forward slash as division / to multiplication as work around for dart-sass deprecation message (f9948ec)
• @clayui/css: Dropdown and Cadmin Dropdown removes dropdown-menu::after padding hack for Firefox. This is no longer an issue. (54a0b08)
• @clayui/css: Dropdowns updates $dropdown-item-base keys to newer nested keys pattern (502ea21)
• @clayui/css: Mixins clay-dropdown-item-variant update to accept newer nested keys pattern and deprecate keys: (bcc0e89)
• @clayui/css: Mixins clay-dropdown-menu-variant removes dropdown-menu::after padding hack for Firefox (a7e2c18)
• @clayui/css: Use calc() for calculating widths and sizes instead of Sass division / and don't use Sass percentage function (1b2e127)
• @clayui/css: use correct icon names for flags in spritesheet (4127aec)
• fixes error when starting yarn develop command of the clayui.com (fa0d8c0)

Features

• @clayui/css: Add heading, maps, order-ascending and order-descending SVG icons and update geolocation SVG icon (319f37f)
• @clayui/css: Cadmin Custom Forms custom-control, custom-checkbox, and custom-radio convert to using Sass map pattern (c8826b2)
• @clayui/css: Cadmin Labels convert to using new Sass map pattern (50a1708)
• @clayui/css: Cadmin Stickers adds $cadmin-sticker-sizes Sass map to generate sticker sizes and use Sass placeholders for sticker sizes for easier extends (2630c54)
• @clayui/css: Custom Forms custom-control, custom-checkbox, and custom-radio convert to using Sass map pattern (d60970d)
• @clayui/css: Labels convert to using new Sass map pattern (1de502f)
• @clayui/css: Mixins clay-sticker-variant expand mixin to include most use cases in Clay and make it compatible with deprecated clay-sticker-size mixin (3e703ed)
• @clayui/css: Mixins Custom Forms adds clay-custom-control-input-variant and clay-custom-control-variant mixins (3060c0b)
• @clayui/css: Mixins update clay-label-variant to provide selectors that are generated by clay-label-size (deprecated) and conver to using new Sass map key pattern while still supporting older key names (c0c9a1c)
• @clayui/css: Stickers adds $sticker-sizes Sass map to generate sticker sizes and use Sass placeholders for sticker sizes for easier extends (2da3013)
• @clayui/css: Stickers convert sticker components to use clay-sticker-variant and clay-css mixins for more customizability (f8adb74)
• @clayui/form: add the new sizing API to Select component (2c7848d)
• clayui.com: add heading, maps, order-ascending, order-descending and geolocation SVG icons (a34f3be)