Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Pagination

yarn add @clayui/pagination

Pagination provides horizontal navigation between chunks(pages) of a dataset.

  • Examples
  • API

Stable3.85.0View in LexiconCHANGELOGstorybook demos

  • Numbered Pagination
    • Accessibility

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:

Copied!
Code Sample (expand to see it)

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:

Copied!
Code Sample (expand to see it)

Accessibility

ClayPaginationWithBasicItems generates aria-label's for the previous, next, page, and ellipsis links. Custom labels can be passed to the previous, next, and page links through the ariaLabels attribute. It is useful for providing translated labels for screen readers or custom text more relevant to your app. The component will replace the placeholder {0} with the page number.

<ClayPaginationWithBasicItems
	ariaLabels={{
		link: 'Change the page to {0}',
		next: 'Change the page to {0}',
		previous: 'Change the page to {0}',
	}}
	activePage={8}
	ellipsisBuffer={2}
	totalPages={25}
/>

The aria-label attribute on ClayPaginationWithBasicItems sets the aria-label on the nav element. It defaults to "Pagination".

<ClayPaginationWithBasicItems
	aria-label="Pagination for 25 pages worth of stuff"
	activePage={8}
	ellipsisBuffer={2}
	totalPages={25}
/>

The ellipsis aria-label and title are customized through the ellipsisProps attribute. The placeholder text {0} will be replaced with the first page number on the list and {1} will be replaced with the last page number on the list.

<ClayPaginationWithBasicItems
	activePage={8}
	ellipsisBuffer={2}
	ellipsisProps={{
		'aria-label': 'Show links to pages {0} through {1}',
		title: 'Show links to pages {0} through {1}',
	}}
	totalPages={25}
/>

How can this be improved? Create an issue!