@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.42.0 (2021-12-15)

Bug Fixes

• @clayui/color-picker: Add active and onActiveChange props (4c7c683)
• @clayui/css: Atlas Pagination focus shadow should match Lexicon's (1f677e2)
• @clayui/css: Button Group .dropdown-toggle-split should use calc to calculate padding (8d88a2d), closes #4499
• @clayui/css: Cadmin convert maps being passed into clay-navbar-variant to use new keys (8aa1044)
• @clayui/css: Cadmin Navbar Component Variants only output media query (md) styles used in DXP (2477c7e)
• @clayui/css: Cadmin Pagination update map keys to use newer keys (9beabca)
• @clayui/css: Convert maps being passed into clay-navbar-variant to use new keys (4f4ba86)
• @clayui/css: Declares border-color and border-style for Management Bar and Navigation Bar base (e67c284)
• @clayui/css: Mixin clay-button-variant unbundles .show from .active (73227a0)
• @clayui/css: Mixin clay-toggle-switch-bar-variant adds .button-icon-off selector (6d3e8fe), closes #4486
• @clayui/css: Mixins _links.scss check if parameter is type map before processing (385fd6b)
• @clayui/css: Mixins clay-link and clay-close Removes the .show > & selector (9b523cf)
• @clayui/css: Mixins clay-navbar-variant convert to clay-css mixin pattern (59b722b)
• @clayui/css: Mixins clay-navbar-variant don't output properties if param is empty map (e6230e7)
• @clayui/css: Mixins check if parameter is map to avoid must be a map error (a128597)
• @clayui/css: Multi Step Nav use calc to calculate sizing for CSS variable compatibility (96dde7e), closes #4498
• @clayui/css: Navbar Component Variants only output media query (md) styles used in DXP (7435d7d)
• @clayui/css: replace filter icon (8231dae), closes #4490
• @clayui/css: Toggle Switch increase specificity of simple-toggle-switch (8f86cd6), closes #4484
• @clayui/form: add missing "textarea" type to Input's component prop (b0a3b89), closes #4477
• clayui.com: updates Google Analytics ID (f6976f4)

Features

• @clayui/css: Cadmin Pagination convert to use clay mixins (56947b5)
• @clayui/css: Cadmin Popovers generate styles using clay-css mixin (d40ef1f)
• @clayui/css: Cadmin Tooltip generate styles using clay-tooltip-variant mixin (df4011e)
• @clayui/css: Mixins clay-button-variant adds option to style ::before and ::after (4003b59)
• @clayui/css: Mixins clay-navbar-variant should be able to output clay-navbar-size selectors (ffaee2a)
• @clayui/css: Mixins adds clay-pagination-items-per-page-variant and clay-pagination-variant (84fff62)
• @clayui/css: Mixins adds clay-popover-variant (9dc84b1)
• @clayui/css: Mixins adds clay-tooltip-variant (5bb6319)
• @clayui/css: Pagination convert to use clay mixins (188ed54)
• @clayui/css: Popovers generate styles using clay-css mixin (6a5c2f6)
• @clayui/css: Tooltip generate styles using clay-tooltip-variant mixin (20f89e5)

BREAKING CHANGES

• @clayui/css: We previously output navbar-expand-{sm|md|lg|xl} for the variants of:

  • Application Bar
  • Management Bar
  • Navigation Bar
  • Sidebar Navigation Bar

We only output those that are needed namely, navbar-expand-md. If you relied upon other breakpoints you will need to declare them in the respective Sass map or set:

$application-bar-base: (
	media-breakpoint-down: $c-unset,
	media-breakpoint-up: $c-unset,
);

to revert back to the old way.

• @clayui/css: The mixin clay-navbar-variant output border-color: transparent and border-style: solid by default. This has been removed to reduce unnecessary CSS. You will need to declare them in your Sass map if you relied upon it.