Pagination

yarn add @clayui/pagination

React Component
CSS / Markup

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

ClayPagination Composition
ClayPaginationWithBasicItems
API

Take a look at our Storybook for more information about this component.

Check the Lexicon Pagination Pattern for a more in-depth look at the motivations and proper usage of this component.

ClayPagination Composition

import ClayPagination from '@clayui/pagination';
import React from 'react';

import ClayPagination from '@clayui/pagination';
import React from 'react';

const Component = () => {
  return (
    <ClayPagination>
      <ClayPagination.Item>{1}</ClayPagination.Item>
      <ClayPagination.Ellipsis items={[2, 3, 4, 5]} />
      <ClayPagination.Item>{"End"}</ClayPagination.Item>
    </ClayPagination>
  );
};
render(<Component />);

const Component = () => {
  return (
    <ClayPagination>
      <ClayPagination.Item>{1}</ClayPagination.Item>
      <ClayPagination.Ellipsis items={[2, 3, 4, 5]} />
      <ClayPagination.Item>{"End"}</ClayPagination.Item>
    </ClayPagination>
  );
};
render(<Component />);

ClayPaginationWithBasicItems

import {ClayPaginationWithBasicItems} from '@clayui/pagination';
import React from 'react';

import {ClayPaginationWithBasicItems} from '@clayui/pagination';
import React from 'react';

const Component = () => {
  const [active, setActive] = useState(8);

  return (
    <ClayPaginationWithBasicItems
      activePage={active}
      ellipsisBuffer={2}
      onPageChange={setActive}
      spritemap={spritemap}
      totalPages={25}
    />
  );
};
render(<Component />);

const Component = () => {
  const [active, setActive] = useState(8);
  return (
    <ClayPaginationWithBasicItems
      activePage={active}
      ellipsisBuffer={2}
      onPageChange={setActive}
      spritemap={spritemap}
      totalPages={25}
    />
  );
};
render(<Component />);

API

ClayPagination

Property	Type	Required	Default	Description
size	'lg' \| 'sm'			The size of pagination element.

ClayPagination.Ellipsis

Property	Type	Required	Default	Description
disabledPages			[]
items			[]

ClayPagination.Item

Property	Type	Required	Default	Description
active			false
disabled			false

ClayPaginationWithBasicItems

Property	Type	Required	Default	Description
disabledPages			[]
ellipsisBuffer			2

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

Sizes
- Small
- Default
- Large
Using Buttons

Check the Lexicon Badges Pattern for a more in-depth look at the motivations and proper usage of this component.

Use pagination-bar's preset styles to give your users more control over the content being displayed on the page.

Showing 1 to 20 of 203 entries.

Previous
1
2
...
- - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
16
Next

<div class="pagination-bar">
	<div class="dropdown pagination-items-per-page">
		<a
			aria-expanded="false"
			aria-haspopup="true"
			class="dropdown-toggle"
			data-toggle="dropdown"
			href="#1"
			role="button"
		>
			10 entries
			<svg
				class="lexicon-icon lexicon-icon-caret-double-l"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-double-l"></use>
			</svg>
		</a>
		<ul class="dropdown-menu dropdown-menu-top">
			<li><a class="dropdown-item" href="#1">5</a></li>
			<li><a class="dropdown-item" href="#1">10</a></li>
			<li><a class="dropdown-item" href="#1">20</a></li>
			<li><a class="dropdown-item" href="#1">30</a></li>
			<li><a class="dropdown-item" href="#1">50</a></li>
		</ul>
	</div>
	<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>
	<ul class="pagination">
		<li class="disabled page-item">
			<a class="page-link" href="#1" role="button" tabindex="-1">
				<svg
					class="lexicon-icon lexicon-icon-angle-left"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-left"></use>
				</svg>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="active page-item">
			<a class="page-link" href="#1" tabindex="-1">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="#1">2</a></li>
		<li class="dropdown page-item">
			<a
				aria-expanded="false"
				aria-haspopup="true"
				class="dropdown-toggle page-link"
				data-toggle="dropdown"
				href="#1"
				role="button"
				>...</a
			>
			<ul class="dropdown-menu dropdown-menu-top-center">
				<li>
					<ul class="inline-scroller">
						<li><a class="dropdown-item" href="#1">3</a></li>
						<li><a class="dropdown-item" href="#1">4</a></li>
						<li><a class="dropdown-item" href="#1">5</a></li>
						<li><a class="dropdown-item" href="#1">6</a></li>
						<li><a class="dropdown-item" href="#1">7</a></li>
						<li><a class="dropdown-item" href="#1">8</a></li>
						<li><a class="dropdown-item" href="#1">9</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="page-item"><a class="page-link" href="#1">16</a></li>
		<li class="page-item">
			<a class="page-link" href="#1" role="button">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-right"></use>
				</svg>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</div>

Sizes

More sizing options, add pagination-sm or pagination-lg to any pagination component to make it smaller or larger. It can be added to the parent container, such as pagination-bar, to size all the pagination components that reside within.

Small

Showing 1 to 20 of 203 entries.

Previous
1
2
...
- - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
16
Next

<div class="pagination-bar pagination-sm">
	<div class="dropdown pagination-items-per-page">
		<a
			aria-expanded="false"
			aria-haspopup="true"
			class="dropdown-toggle"
			data-toggle="dropdown"
			href="#1"
			role="button"
		>
			10 entries
			<svg
				class="lexicon-icon lexicon-icon-caret-double-l"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-double-l"></use>
			</svg>
		</a>
		<ul class="dropdown-menu dropdown-menu-top">
			<li><a class="dropdown-item" href="#1">5</a></li>
			<li><a class="dropdown-item" href="#1">10</a></li>
			<li><a class="dropdown-item" href="#1">20</a></li>
			<li><a class="dropdown-item" href="#1">30</a></li>
			<li><a class="dropdown-item" href="#1">50</a></li>
		</ul>
	</div>
	<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>
	<ul class="pagination">
		<li class="disabled page-item">
			<a class="page-link" href="#1" role="button" tabindex="-1">
				<svg
					class="lexicon-icon lexicon-icon-angle-left"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-left"></use>
				</svg>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="active page-item">
			<a class="page-link" href="#1" tabindex="-1">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="#1">2</a></li>
		<li class="dropdown page-item">
			<a
				aria-expanded="false"
				aria-haspopup="true"
				class="dropdown-toggle page-link"
				data-toggle="dropdown"
				href="#1"
				role="button"
				>...</a
			>
			<ul class="dropdown-menu dropdown-menu-top-center">
				<li>
					<ul class="inline-scroller">
						<li><a class="dropdown-item" href="#1">3</a></li>
						<li><a class="dropdown-item" href="#1">4</a></li>
						<li><a class="dropdown-item" href="#1">5</a></li>
						<li><a class="dropdown-item" href="#1">6</a></li>
						<li><a class="dropdown-item" href="#1">7</a></li>
						<li><a class="dropdown-item" href="#1">8</a></li>
						<li><a class="dropdown-item" href="#1">9</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="page-item"><a class="page-link" href="#1">16</a></li>
		<li class="page-item">
			<a class="page-link" href="#1" role="button">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-right"></use>
				</svg>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</div>

Default

Showing 1 to 20 of 203 entries.

Previous
1
2
...
- - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
16
Next

<div class="pagination-bar">
	<div class="dropdown pagination-items-per-page">
		<a
			aria-expanded="false"
			aria-haspopup="true"
			class="dropdown-toggle"
			data-toggle="dropdown"
			href="#1"
			role="button"
		>
			10 entries
			<svg
				class="lexicon-icon lexicon-icon-caret-double-l"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-double-l"></use>
			</svg>
		</a>
		<ul class="dropdown-menu dropdown-menu-top">
			<li><a class="dropdown-item" href="#1">5</a></li>
			<li><a class="dropdown-item" href="#1">10</a></li>
			<li><a class="dropdown-item" href="#1">20</a></li>
			<li><a class="dropdown-item" href="#1">30</a></li>
			<li><a class="dropdown-item" href="#1">50</a></li>
		</ul>
	</div>
	<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>
	<ul class="pagination">
		<li class="disabled page-item">
			<a class="page-link" href="#1" role="button" tabindex="-1">
				<svg
					class="lexicon-icon lexicon-icon-angle-left"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-left"></use>
				</svg>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="active page-item">
			<a class="page-link" href="#1" tabindex="-1">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="#1">2</a></li>
		<li class="dropdown page-item">
			<a
				aria-expanded="false"
				aria-haspopup="true"
				class="dropdown-toggle page-link"
				data-toggle="dropdown"
				href="#1"
				role="button"
				>...</a
			>
			<ul class="dropdown-menu dropdown-menu-top-center">
				<li>
					<ul class="inline-scroller">
						<li><a class="dropdown-item" href="#1">3</a></li>
						<li><a class="dropdown-item" href="#1">4</a></li>
						<li><a class="dropdown-item" href="#1">5</a></li>
						<li><a class="dropdown-item" href="#1">6</a></li>
						<li><a class="dropdown-item" href="#1">7</a></li>
						<li><a class="dropdown-item" href="#1">8</a></li>
						<li><a class="dropdown-item" href="#1">9</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="page-item"><a class="page-link" href="#1">16</a></li>
		<li class="page-item">
			<a class="page-link" href="#1" role="button">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-right"></use>
				</svg>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</div>

Large

Showing 1 to 20 of 203 entries.

Previous
1
2
...
- - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
16
Next

<div class="pagination-bar pagination-lg">
	<div class="dropdown pagination-items-per-page">
		<a
			aria-expanded="false"
			aria-haspopup="true"
			class="dropdown-toggle"
			data-toggle="dropdown"
			href="#1"
			role="button"
		>
			10 entries
			<svg
				class="lexicon-icon lexicon-icon-caret-double-l"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-double-l"></use>
			</svg>
		</a>
		<ul class="dropdown-menu dropdown-menu-top">
			<li><a class="dropdown-item" href="#1">5</a></li>
			<li><a class="dropdown-item" href="#1">10</a></li>
			<li><a class="dropdown-item" href="#1">20</a></li>
			<li><a class="dropdown-item" href="#1">30</a></li>
			<li><a class="dropdown-item" href="#1">50</a></li>
		</ul>
	</div>
	<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>
	<ul class="pagination">
		<li class="disabled page-item">
			<a class="page-link" href="#1" role="button" tabindex="-1">
				<svg
					class="lexicon-icon lexicon-icon-angle-left"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-left"></use>
				</svg>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="active page-item">
			<a class="page-link" href="#1" tabindex="-1">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="#1">2</a></li>
		<li class="dropdown page-item">
			<a
				aria-expanded="false"
				aria-haspopup="true"
				class="dropdown-toggle page-link"
				data-toggle="dropdown"
				href="#1"
				role="button"
				>...</a
			>
			<ul class="dropdown-menu dropdown-menu-top-center">
				<li>
					<ul class="inline-scroller">
						<li><a class="dropdown-item" href="#1">3</a></li>
						<li><a class="dropdown-item" href="#1">4</a></li>
						<li><a class="dropdown-item" href="#1">5</a></li>
						<li><a class="dropdown-item" href="#1">6</a></li>
						<li><a class="dropdown-item" href="#1">7</a></li>
						<li><a class="dropdown-item" href="#1">8</a></li>
						<li><a class="dropdown-item" href="#1">9</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="page-item"><a class="page-link" href="#1">16</a></li>
		<li class="page-item">
			<a class="page-link" href="#1" role="button">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-right"></use>
				</svg>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</div>

Using Buttons

Showing 1 to 20 of 203 entries.

- - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9

<div class="pagination-bar">
	<div class="dropdown pagination-items-per-page">
		<button
			aria-expanded="false"
			aria-haspopup="true"
			class="btn btn-unstyled dropdown-toggle"
			data-toggle="dropdown"
			type="button"
		>
			10 entries
			<svg
				class="lexicon-icon lexicon-icon-caret-double-l"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-double-l"></use>
			</svg>
		</button>
		<ul class="dropdown-menu dropdown-menu-top">
			<li><a class="dropdown-item" href="#1">5</a></li>
			<li><a class="dropdown-item" href="#1">10</a></li>
			<li><a class="dropdown-item" href="#1">20</a></li>
			<li><a class="dropdown-item" href="#1">30</a></li>
			<li><a class="dropdown-item" href="#1">50</a></li>
		</ul>
	</div>
	<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>
	<ul class="pagination">
		<li class="disabled page-item">
			<button
				class="btn btn-unstyled page-link"
				disabled=""
				type="button"
			>
				<svg
					class="lexicon-icon lexicon-icon-angle-left"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-left"></use>
				</svg>
				<span class="sr-only">Previous</span>
			</button>
		</li>
		<li class="active page-item">
			<button
				class="btn btn-unstyled page-link"
				tabindex="-1"
				type="button"
			>
				1
			</button>
		</li>
		<li class="page-item">
			<button class="btn btn-unstyled page-link" type="button">2</button>
		</li>
		<li class="dropdown page-item">
			<button
				aria-expanded="false"
				aria-haspopup="true"
				class="btn btn-unstyled dropdown-toggle page-link"
				data-toggle="dropdown"
				type="button"
			>
				...
			</button>
			<ul class="dropdown-menu dropdown-menu-top-center">
				<li>
					<ul class="inline-scroller">
						<li><a class="dropdown-item" href="#1">3</a></li>
						<li><a class="dropdown-item" href="#1">4</a></li>
						<li><a class="dropdown-item" href="#1">5</a></li>
						<li><a class="dropdown-item" href="#1">6</a></li>
						<li><a class="dropdown-item" href="#1">7</a></li>
						<li><a class="dropdown-item" href="#1">8</a></li>
						<li><a class="dropdown-item" href="#1">9</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="page-item">
			<button class="btn btn-unstyled page-link" type="button">16</button>
		</li>
		<li class="page-item">
			<button class="btn btn-unstyled page-link" type="button">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-right"></use>
				</svg>
				<span class="sr-only">Next</span>
			</button>
		</li>
	</ul>
</div>