- React
- HTML

## Examples

### Top

### Top sticky

### Indeterminate (item count is not known)

### Bottom

### Bottom sticky

### Top disabled

### Compact

### Top with display summary modifier

### Top with display full modifier

### Top with responsive display summary and display full modifiers

### Compact display full modifier

### Inset

## Documentation

### Accessibility

Attribute | Applied to | Outcome
--- | --- | ---
`aria-label` | `.pf-v6-c-pagination__nav` | Provides an accessible name for pagination navigation element. Required
`type="number"` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Defines a field as a number. Required
`value` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Provides initial integer value. Required
`min` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Provides minimum integer value. Required
`max` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Provides max integer value. Required

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-pagination` | `<div>` | Initiates pagination.
`.pf-v6-c-pagination__current` | `<div>` | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`.
`.pf-v6-c-pagination__total-items` | `<div>` | Initiates element to replace the menu toggle on summary.
`.pf-v6-c-pagination__page-menu` | `<div>` | Initiates wrapper element for the pagination menu toggle. Required when a menu toggle is intended or expected to be rendered.
`.pf-v6-c-pagination__nav` | `<nav>` | Initiates pagination nav.
`.pf-v6-c-pagination__nav-control` | `<div>` | Initiates pagination nav control.
`.pf-v6-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select.
`.pf-m-display-summary{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for summary display pagination component styles at optional breakpoint.
`.pf-m-display-full{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for full display pagination component styles at optional breakpoint.
`.pf-m-bottom` | `.pf-v6-c-pagination` | Modifies for bottom pagination component styles.
`.pf-m-compact` | `.pf-v6-c-pagination` | Modifies for compact pagination component styles.
`.pf-m-static` | `.pf-v6-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary.
`.pf-m-sticky` | `.pf-v6-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-v6-c-pagination.pf-m-bottom`.
`.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies pagination horizontal padding at optional breakpoint.
`.pf-m-page-insets` | `.pf-v6-c-pagination` | Modifies the pagination component padding/inset to visually match padding of page elements.
`.pf-m-first` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the first page button.
`.pf-m-prev` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the previous page button.
`.pf-m-next` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the next page button.
`.pf-m-last` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the last page button.

##
CSS variables