pagination
Use nav with aria-label="pagination" and mark the current page with
aria-current="page".
<nav aria-label="pagination" class="pagination">
<ul>
<li>
<a href="#">1</a>
</li>
<li>
<a aria-current="page" href="#">2</a>
</li>
</ul>
</nav>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Pagination</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak data-example="pagination-demo">
<main class="visual-example">
<nav aria-label="pagination" class="pagination">
<ul>
<li>
<a href="#previous" rel="prev" aria-label="Go to previous page">
<svg
icon="inline-start"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m15 18-6-6 6-6"></path>
</svg>
<span>Previous</span>
</a>
</li>
<li>
<a href="#page-1">1</a>
</li>
<li>
<a href="#page-2" aria-current="page">2</a>
</li>
<li>
<a href="#page-3">3</a>
</li>
<li>
<span aria-hidden="true">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
<circle cx="5" cy="12" r="1.5"></circle>
<circle cx="12" cy="12" r="1.5"></circle>
<circle cx="19" cy="12" r="1.5"></circle>
</svg>
<span>More pages</span>
</span>
</li>
<li>
<a href="#next" rel="next" aria-label="Go to next page">
<span>Next</span>
<svg
icon="inline-end"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</li>
</ul>
</nav>
</main>
</body>
</html>
Workflows
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Pagination Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="paginationWorkflow={showPage4:false,activePage:2,nextDisabled:false,rows:'25'}"
data-example="pagination-icons-only pagination-rtl pagination-simple"
>
<main class="visual-example">
<section aria-labelledby="pagination-dynamic-heading">
<header>
<h2 id="pagination-dynamic-heading">Application state</h2>
<div class="component-state-actions">
<button
type="button"
variant="outline"
size="sm"
ng-click="paginationWorkflow.showPage4=!paginationWorkflow.showPage4; paginationWorkflow.activePage=paginationWorkflow.showPage4 ? 4 : 2"
>
{{ paginationWorkflow.showPage4 ? 'Remove page 4' : 'Add page 4'
}}
</button>
<button
type="button"
variant="outline"
size="sm"
ng-click="paginationWorkflow.nextDisabled=!paginationWorkflow.nextDisabled"
>
{{ paginationWorkflow.nextDisabled ? 'Enable next' : 'Disable
next' }}
</button>
</div>
</header>
<nav
aria-label="Dynamic pagination"
id="dynamic-pagination"
class="pagination"
>
<ul>
<li>
<a
href="#page-1"
ng-click="paginationWorkflow.activePage=1"
aria-current="{{ paginationWorkflow.activePage === 1 ? 'page' : 'false' }}"
>1</a
>
</li>
<li>
<a
href="#page-2"
ng-click="paginationWorkflow.activePage=2"
aria-current="{{ paginationWorkflow.activePage === 2 ? 'page' : 'false' }}"
>2</a
>
</li>
<li>
<a
href="#page-3"
ng-click="paginationWorkflow.activePage=3"
aria-current="{{ paginationWorkflow.activePage === 3 ? 'page' : 'false' }}"
>3</a
>
</li>
<li ng-if="paginationWorkflow.showPage4">
<a
href="#page-4"
ng-click="paginationWorkflow.activePage=4"
aria-current="{{ paginationWorkflow.activePage === 4 ? 'page' : 'false' }}"
>4</a
>
</li>
<li>
<a
href="#next"
rel="next"
aria-label="Go to next page"
aria-disabled="{{ paginationWorkflow.nextDisabled }}"
>
<span>Next</span>
<svg
icon="inline-end"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</li>
</ul>
</nav>
</section>
<section aria-labelledby="pagination-simple-heading">
<header>
<h2 id="pagination-simple-heading">Simple</h2>
</header>
<nav aria-label="Simple pagination" class="pagination">
<ul>
<li>
<a href="#simple-1">1</a>
</li>
<li>
<a href="#simple-2" aria-current="page">2</a>
</li>
<li>
<a href="#simple-3">3</a>
</li>
<li>
<a href="#simple-4">4</a>
</li>
<li>
<a href="#simple-5">5</a>
</li>
</ul>
</nav>
</section>
<section aria-labelledby="pagination-icons-heading">
<header>
<h2 id="pagination-icons-heading">Rows</h2>
</header>
<div class="pagination-compact-row">
<label class="pagination-rows-field" for="pagination-rows-per-page">
<span>Rows per page</span>
<select
id="pagination-rows-per-page"
ng-model="paginationWorkflow.rows"
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</label>
<nav aria-label="Compact pagination" class="pagination">
<ul>
<li>
<a
href="#compact-previous"
rel="prev"
aria-label="Go to previous page"
>
<svg
icon="inline-start"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m15 18-6-6 6-6"></path>
</svg>
</a>
</li>
<li>
<a href="#compact-next" rel="next" aria-label="Go to next page">
<svg
icon="inline-end"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</li>
</ul>
</nav>
</div>
<output class="workflow-output">
Rows: <span ng-bind="paginationWorkflow.rows"></span>
</output>
</section>
<section aria-labelledby="pagination-rtl-heading" lang="ar">
<header>
<h2 id="pagination-rtl-heading">الصفحات</h2>
</header>
<nav
dir="rtl"
aria-label="ترقيم الصفحات"
id="rtl-pagination"
class="pagination"
>
<ul>
<li>
<a
href="#rtl-previous"
rel="prev"
aria-label="الانتقال إلى الصفحة السابقة"
>
<svg
icon="inline-start"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m15 18-6-6 6-6"></path>
</svg>
<span>السابق</span>
</a>
</li>
<li>
<a href="#rtl-1">١</a>
</li>
<li>
<a href="#rtl-2" aria-current="page">٢</a>
</li>
<li>
<a href="#rtl-3">٣</a>
</li>
<li>
<span>
<svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
<circle cx="5" cy="12" r="1.5"></circle>
<circle cx="12" cy="12" r="1.5"></circle>
<circle cx="19" cy="12" r="1.5"></circle>
</svg>
<span>صفحات إضافية</span>
</span>
</li>
<li>
<a
href="#rtl-next"
rel="next"
aria-label="الانتقال إلى الصفحة التالية"
>
<span>التالي</span>
<svg
icon="inline-end"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</a>
</li>
</ul>
</nav>
</section>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native navigation, lists, and links.
Anatomy
Root styling selector
.pagination
Semantic structure
Apply .pagination to a native nav containing a ul or ol with direct li children. The class distinguishes Pagination from other navigation landmarks; page, previous, and next controls remain native links. Ellipsis is optional. Compose rows-per-page controls beside Pagination with existing native form components; Pagination does not own that model.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
aria-current | Authored | Current item or date state. |
aria-disabled | Authored | Semantic disabled state. |
dir | Authored | Text and interaction direction: ltr or rtl. |
rel | Authored | Use the prev or next link type for directional pagination controls. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Native navigation, lists, list items, and links own pagination semantics and navigation. URLs, routing, page counts, rows-per-page values, and current-page application state remain AngularTS or application concerns. AngularCSS registers no pagination directive.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Use a native nav landmark with an accessible label, a native list, and native links. Expose exactly one current destination with aria-current="page". Previous and next links need destination-specific accessible names; ellipsis is decorative and removed from the accessibility tree.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.