@patternfly/patternfly/docs/components/Pagination/examples/Pagination.md

Assets, source, tooling, and content for PatternFly 4

---
id: Pagination
section: components
cssPrefix: pf-c-pagination
---
## Examples

### Top

```html isFullscreen
<div class="pf-c-pagination">
  <div class="pf-c-pagination__total-items">
    <b>1 - 10</b>&nbsp;of&nbsp;
    <b>37</b>
  </div>
  <div class="pf-c-options-menu">
    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
      <span class="pf-c-options-menu__toggle-text">
        <b>1 - 10</b>&nbsp;of&nbsp;
        <b>37</b>
      </span>
      <button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-top-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
        <span class="pf-c-options-menu__toggle-button-icon">
          <i class="fas fa-caret-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-top-example-toggle" hidden>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
      </li>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">10 per page
          <div class="pf-c-options-menu__menu-item-icon">
            <i class="fas fa-check" aria-hidden="true"></i>
          </div>
        </button>
      </li>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
      </li>
    </ul>
  </div>
  <nav class="pf-c-pagination__nav" aria-label="Pagination">
    <div class="pf-c-pagination__nav-control pf-m-first">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to first page">
        <i class="fas fa-angle-double-left" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-prev">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
        <i class="fas fa-angle-left" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-page-select">
      <input class="pf-c-form-control" aria-label="Current page" type="number" min="1" max="4" value="1" />
      <span aria-hidden="true">of 4</span>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-next">
      <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-last">
      <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to last page">
        <i class="fas fa-angle-double-right" aria-hidden="true"></i>
      </button>
    </div>
  </nav>
</div>
```

### Top expanded

```html isFullscreen
<div class="pf-c-pagination">
  <div class="pf-c-pagination__total-items">
    <b>1 - 10</b>&nbsp;of&nbsp;
    <b>37</b>
  </div>
  <div class="pf-c-options-menu pf-m-expanded">
    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
      <span class="pf-c-options-menu__toggle-text">
        <b>1 - 10</b>&nbsp;of&nbsp;
        <b>37</b>
      </span>
      <button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-top-expanded-example-toggle" aria-haspopup="listbox" aria-expanded="true" aria-label="Items per page">
        <span class="pf-c-options-menu__toggle-button-icon">
          <i class="fas fa-caret-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-top-expanded-example-toggle">
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
      </li>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">10 per page
          <div class="pf-c-options-menu__menu-item-icon">
            <i class="fas fa-check" aria-hidden="true"></i>
          </div>
        </button>
      </li>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
      </li>
    </ul>
  </div>
  <nav class="pf-c-pagination__nav" aria-label="Pagination">
    <div class="pf-c-pagination__nav-control pf-m-first">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to first page">
        <i class="fas fa-angle-double-left" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-prev">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
        <i class="fas fa-angle-left" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-page-select">
      <input class="pf-c-form-control" aria-label="Current page" type="number" min="1" max="4" value="1" />
      <span aria-hidden="true">of 4</span>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-next">
      <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-last">
      <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to last page">
        <i class="fas fa-angle-double-right" aria-hidden="true"></i>
      </button>
    </div>
  </nav>
</div>
```

### Bottom

```html isFullscreen
<div class="pf-c-pagination pf-m-bottom">
  <div class="pf-c-options-menu">
    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
      <span class="pf-c-options-menu__toggle-text">
        <b>1 - 10</b>&nbsp;of&nbsp;
        <b>37</b>
      </span>
      <button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-bottom-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
        <span class="pf-c-options-menu__toggle-button-icon">
          <i class="fas fa-caret-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-bottom-example-toggle" hidden>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
      </li>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">10 per page
          <div class="pf-c-options-menu__menu-item-icon">
            <i class="fas fa-check" aria-hidden="true"></i>
          </div>
        </button>
      </li>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
      </li>
    </ul>
  </div>
  <nav class="pf-c-pagination__nav" aria-label="Pagination">
    <div class="pf-c-pagination__nav-control pf-m-first">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to first page">
        <i class="fas fa-angle-double-left" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-prev">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
        <i class="fas fa-angle-left" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-page-select">
      <input class="pf-c-form-control" aria-label="Current page" type="number" min="1" max="4" value="1" />
      <span aria-hidden="true">of 4</span>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-next">
      <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-last">
      <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to last page">
        <i class="fas fa-angle-double-right" aria-hidden="true"></i>
      </button>
    </div>
  </nav>
</div>
```

### Top disabled

```html isFullscreen
<div class="pf-c-pagination">
  <div class="pf-c-pagination__total-items">
    <b>1 - 10</b>&nbsp;of&nbsp;
    <b>37</b>
  </div>
  <div class="pf-c-options-menu">
    <div class="pf-c-options-menu__toggle pf-m-text pf-m-disabled pf-m-plain">
      <span class="pf-c-options-menu__toggle-text">
        <b>1 - 10</b>&nbsp;of&nbsp;
        <b>37</b>
      </span>
      <button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-top-disabled-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page" disabled>
        <span class="pf-c-options-menu__toggle-button-icon">
          <i class="fas fa-caret-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-top-disabled-example-toggle" hidden>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
      </li>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">10 per page
          <div class="pf-c-options-menu__menu-item-icon">
            <i class="fas fa-check" aria-hidden="true"></i>
          </div>
        </button>
      </li>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
      </li>
    </ul>
  </div>
  <nav class="pf-c-pagination__nav" aria-label="Pagination">
    <div class="pf-c-pagination__nav-control pf-m-first">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to first page">
        <i class="fas fa-angle-double-left" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-prev">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
        <i class="fas fa-angle-left" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-page-select">
      <input class="pf-c-form-control" disabled aria-label="Current page" type="number" min="1" max="4" value="1" />
      <span aria-hidden="true">of 4</span>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-next">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to next page">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-last">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to last page">
        <i class="fas fa-angle-double-right" aria-hidden="true"></i>
      </button>
    </div>
  </nav>
</div>
```

### Compact

```html isFullscreen
<div class="pf-c-pagination pf-m-compact">
  <div class="pf-c-pagination__total-items">
    <b>1 - 10</b>&nbsp;of&nbsp;
    <b>37</b>
  </div>
  <div class="pf-c-options-menu">
    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
      <span class="pf-c-options-menu__toggle-text">
        <b>1 - 10</b>&nbsp;of&nbsp;
        <b>37</b>
      </span>
      <button class="pf-c-options-menu__toggle-button" id="pagination-options-menu-compact-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
        <span class="pf-c-options-menu__toggle-button-icon">
          <i class="fas fa-caret-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <ul class="pf-c-options-menu__menu" aria-labelledby="pagination-options-menu-compact-example-toggle" hidden>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
      </li>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">10 per page
          <div class="pf-c-options-menu__menu-item-icon">
            <i class="fas fa-check" aria-hidden="true"></i>
          </div>
        </button>
      </li>
      <li>
        <button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
      </li>
    </ul>
  </div>
  <nav class="pf-c-pagination__nav" aria-label="Pagination">
    <div class="pf-c-pagination__nav-control pf-m-prev">
      <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
        <i class="fas fa-angle-left" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-c-pagination__nav-control pf-m-next">
      <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
      </button>
    </div>
  </nav>
</div>
```

## Documentation

Note: `<button>` or `<a>` elements can be used in `.pf-c-pagination__nav-page-select`.

### Accessibility

| Attribute    | Applied to              | Outcome                                                                     |
| ------------ | ----------------------- | --------------------------------------------------------------------------- |
| `aria-label` | `.pf-c-pagination__nav` | Provides an accessible name for pagination navigation element. **Required** |

## Pagination nav input

| Attribute       | Applied to                                                 | Outcome                                      |
| --------------- | ---------------------------------------------------------- | -------------------------------------------- |
| `type="number"` | `.pf-c-pagination` > `.pf-c-form-control`                  | Defines a field as a number. **Required**    |
| `value`         | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required** |
| `min`           | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required** |
| `max`           | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required**     |

### Usage

| Class                               | Applied to                      | Outcome                                                                                                                                    |
| ----------------------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `.pf-c-pagination`                  | `<div>`                         | Initiates pagination.                                                                                                                      |
| `.pf-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-c-pagination__total-items`     | `<div>`                         | Initiates element to replace the options menu on mobile.                                                                                   |
| `.pf-c-pagination__nav`             | `<nav>`                         | Initiates pagination nav.                                                                                                                  |
| `.pf-c-pagination__nav-control`     | `<div>`                         | Initiates pagination nav control.                                                                                                          |
| `.pf-c-pagination__nav-page-select` | `<div>`                         | Initiates pagination nav page select.                                                                                                      |
| `.pf-m-bottom`                      | `.pf-c-pagination`              | Modifies for bottom pagination component styles.                                                                                           |
| `.pf-m-compact`                     | `.pf-c-pagination`              | Modifies for compact pagination component styles.                                                                                          |
| `.pf-m-static`                      | `.pf-c-pagination.pf-m-bottom`  | Modifies bottom pagination to not be positioned sticky on mobile.                                                                          |
| `.pf-m-first`                       | `.pf-c-pagination__nav-control` | Indicates the control is for the first page button.                                                                                        |
| `.pf-m-prev`                        | `.pf-c-pagination__nav-control` | Indicates the control is for the previous page button.                                                                                     |
| `.pf-m-next`                        | `.pf-c-pagination__nav-control` | Indicates the control is for the next page button.                                                                                         |
| `.pf-m-last`                        | `.pf-c-pagination__nav-control` | Indicates the control is for the last page button.                                                                                         |