Clay
Skip to ContentClayClay by Liferay
  • Get Started
    • Introduction
    • What is Clay
    • Importing the JS Component
    • Using JS Components with Metal.js
    • Web Components
  • Foundations
    • Grid
    • Typography
  • Lexicon Core Components
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Advanced Examples
        • Axis Label
        • Axis Range
        • Data Color
        • Gridlines
        • Predictive forecasting
        • Regions
        • X Axis Tick Formatting
      • Basic Examples
        • Bar Chart
        • Bubble Chart
        • Combination Chart
        • Donut Chart
        • Gauge Chart
        • Geomap Chart
        • Line Chart
        • Pie Chart
        • Scatter Chart
        • Spline Chart
        • Step Chart
    • Dataset Display
    • Dropdown Menu
    • Forms
      • Checkbox, Radio, and Toggle
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumbs
      • Navigation Bar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bars
    • Sidebar
      • Info Panel
    • Stickers
    • Table
      • Inline Edit Table
      • Table
    • Tabs
    • Toolbars
      • Management Toolbar
  • CSS Framework
    • SCSS
    • Class Helpers
    • Satellite Components
      • Alerts
      • Badges
      • Button Group
      • Cards
      • Dropdown Menu
      • Forms
        • Form Elements
        • Form Elements (Input Groups)
        • Form Elements (Validation)
      • Images (Aspect Ratios)
      • Images and Thumbnails
      • Labels
      • Links
      • List Groups
      • Modals
      • Nav
      • Navigation
        • Header
      • Paginations
      • Panels
      • Popovers and Tooltips
      • Progress Bars
      • Stickers
      • Tables
      • Tbar (Toolbar)
      • Timelines
      • Toggle Switch
    • Page Examples
      • Card View Template
      • Document Upload
      • List View Template
      • Table View Template
      • Users and Organizations
  • News

Pagination

Description

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

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

Variatons

Pagination

Preset pagination styles help divide up large blocks of content on your site or app.

  • Previous
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • ...
    11 12 13 14 15
  • 16
  • Next
<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" />
			</svg>
			<span class="sr-only">Previous</span>
		</a>
	</li>
	<li class="active page-item"><a class="page-link" href="#1">1</a></li>
	<li class="page-item"><a class="page-link" href="#1">2</a></li>
	<li class="page-item"><a class="page-link" href="#1">3</a></li>
	<li class="page-item"><a class="page-link" href="#1">4</a></li>
	<li class="page-item"><a class="page-link" href="#1">5</a></li>
	<li class="page-item"><a class="page-link" href="#1">6</a></li>
	<li class="page-item"><a class="page-link" href="#1">7</a></li>
	<li class="page-item"><a class="page-link" href="#1">8</a></li>
	<li class="page-item"><a class="page-link" href="#1">9</a></li>
	<li class="page-item"><a class="page-link" href="#1">10</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>
		<div class="dropdown-menu dropdown-menu-top-center">
			<div class="inline-scroller">
				<a class="dropdown-item" href="#1">11</a>
				<a class="dropdown-item" href="#1">12</a>
				<a class="dropdown-item" href="#1">13</a>
				<a class="dropdown-item" href="#1">14</a>
				<a class="dropdown-item" href="#1">15</a>
			</div>
		</div>
	</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" />
			</svg>
			<span class="sr-only">Next</span>
		</a>
	</li>
</ul>

Pagination Bar

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

10 entries
5 10 20 30 50
Showing 1 to 20 of 203 entries.
  • Previous
  • 1
  • 2
  • ...
    3 4 5 6 7 8 9 10 11 12 13 14 15
  • 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" />
			</svg>
		</a>
		<div class="dropdown-menu dropdown-menu-top">
			<a class="dropdown-item" href="#1">5</a>
			<a class="dropdown-item" href="#1">10</a>
			<a class="dropdown-item" href="#1">20</a>
			<a class="dropdown-item" href="#1">30</a>
			<a class="dropdown-item" href="#1">50</a>
		</div>
	</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" />
				</svg>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="active page-item"><a class="page-link" href="#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>
			<div class="dropdown-menu dropdown-menu-top-center">
				<div class="inline-scroller">
					<a class="dropdown-item" href="#1">3</a>
					<a class="dropdown-item" href="#1">4</a>
					<a class="dropdown-item" href="#1">5</a>
					<a class="dropdown-item" href="#1">6</a>
					<a class="dropdown-item" href="#1">7</a>
					<a class="dropdown-item" href="#1">8</a>
					<a class="dropdown-item" href="#1">9</a>
					<a class="dropdown-item" href="#1">10</a>
					<a class="dropdown-item" href="#1">11</a>
					<a class="dropdown-item" href="#1">12</a>
					<a class="dropdown-item" href="#1">13</a>
					<a class="dropdown-item" href="#1">14</a>
					<a class="dropdown-item" href="#1">15</a>
				</div>
			</div>
		</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" />
				</svg>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</div>

API

ClayPagination

Property Description Type Required Default
baseHref
Href to create each page complete href. string|undefined false undefined
currentPage
Current page number. number true undefined
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
id
Id to be applied to the element. string|undefined false undefined
spritemap
The path to the SVG spritemap file containing the icons. string true undefined
totalPages
Total number of pages to show. number true undefined

ClayPaginationBar

Property Description Type Required Default
baseHref
Href to create each pagination page complete href. string|undefined false undefined
currentPage
Current pagination page number. number true undefined
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
entries
List of available number of entries. array true undefined
id
Id to be applied to the element. string|undefined false undefined
selectedEntry
Entries index that points to selected entry. number|undefined false undefined
spritemap
The path to the SVG spritemap file containing the icons. string true undefined
totalEntries
Total number of entries. number true undefined

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.