Pagination is a control that enables users to navigate through pages of content.
Installation
<script type="module">
import '@nvidia-elements/core/pagination/define.js';
</script>
<nve-pagination value="1" items="100" step="10"></nve-pagination>
<script type="module">
const pagination = document.querySelector("nve-pagination");
pagination.addEventListener("change", (e) => console.log(e.target.value));
</script>
Skippable
Pagination with skip buttons to navigate to first and last pages quickly.
Disabled
Disabled pagination component that prevents user interaction.
Flat
Pagination with flat container styling for a more minimal appearance.
Inline
Inline pagination layout that fits inline with content.
Disable Step
Inline pagination with disabled step selector to prevent page size changes.
Dynamic Items
If the upper bound of items is unknown, use the last-page event to determine when to load more data and update the pagination with the latest total of items.
Dynamic Step Size
When a custom step exists, the select options dynamically adapt to the step and append to the default option list.
Suffix Label
Use the suffix-label slot to customize the "of total" label when dealing with approximated totals from API responses. This is useful when the API returns a limited count but indicates there are more items available.
Forms
Pagination as a form associated component that participates in form submission and emits change, input, and step-change events. Use when page selection needs to integrate with form data collection or server-side form handling.
No Provided Items Count
Pagination without items count display, useful when total count is unknown.
Pattern - Page List
Custom pagination pattern using toolbar with numbered page buttons and navigation arrows.
Pattern - Page List Skip
Enhanced pagination pattern with first/last page buttons and numbered page navigation.
Pattern - Vertical
Vertical pagination pattern with up/down navigation arrows for compact layouts.
Pattern - Custom Select
Custom pagination with select dropdown for page size and navigation arrows.
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.