---
title: "Pagination"
description: "Displays data in paged format and provides navigation between pages."
canonical_url: "https://vinicunca.dev/akar/components/pagination"
---
# Pagination

> Displays data in paged format and provides navigation between pages.

```vue [index.vue]
<script setup lang="ts">
import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot } from 'akar'
import './styles.css'
</script>

<template>
  <div class="akar-demo akar-demo-Pagination">
    <PaginationRoot
        :total="100"
        :sibling-count="1"
        show-edges
        :default-page="2"
      >
        <PaginationList
          v-slot="{ items }"
          class="PaginationList"
        >
          <PaginationFirst class="Button">
            <PIcon name="i-lucide-chevrons-left" />
          </PaginationFirst>
          <PaginationPrev
            :style="{ marginRight: 16 }"
            class="Button"
          >
            <PIcon name="i-lucide-chevron-left" />
          </PaginationPrev>
          <template v-for="(page, index) in items">
            <PaginationListItem
              v-if="page.type === 'page'"
              :key="index"
              class="Button"
              :value="page.value"
            >
              {{ page.value }}
            </PaginationListItem>
            <PaginationEllipsis
              v-else
              :key="page.type"
              :index="index"
              class="PaginationEllipsis"
            >
              &#8230;
            </PaginationEllipsis>
          </template>
          <PaginationNext
            :style="{ marginLeft: 16 }"
            class="Button"
          >
            <PIcon name="i-lucide-chevron-right" />
          </PaginationNext>
          <PaginationLast class="Button">
            <PIcon name="i-lucide-chevrons-right" />
          </PaginationLast>
        </PaginationList>
      </PaginationRoot>
  </div>
</template>
```

```css [styles.css]
@import '../_colors/black-alpha.css';
@import '../_colors/mauve.css';
@import '../_colors/grass.css';

@scope (.akar-demo-Pagination) {
/* reset */
button {
  all: unset;
}

.Button{
  text-align: center;
  font-size: 15px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.25rem; 
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.Button:disabled {
  opacity: .5
}

.Button:hover{
  background-color: rgb(255 255 255 / 0.1)
}

.Button[data-selected]{ 
  background-color: rgb(255 255 255);
  color: var(--black-a11)
}

.PaginationEllipsis{
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center
}

.PaginationList{
  display: flex;
  align-items: center;
  gap: 0.25rem; 
  color: rgb(255 255 255)
}
}
```

## Features

- Enable quick access to first, or last page
- Enable to show edges constantly, or not

## Installation

Install the component from your command line.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

### Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot } from 'akar';
</script>

<template>
  <PaginationRoot>
    <PaginationList v-slot="{ items }">
      <PaginationFirst />
      <PaginationPrev />
      <template v-for="(page, index) in items">
        <PaginationListItem
          v-if="page.type === 'page'"
          :key="index"
        />
        <PaginationEllipsis
          v-else
          :key="page.type"
          :index="index"
        >
          &#8230;
        </PaginationEllipsis>
      </template>
      <PaginationNext />
      <PaginationLast />
    </PaginationList>
  </PaginationRoot>
</template>
```

## API Reference

### Root

Contains all of the paginations parts.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"nav"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `defaultPage` | `1` | `number` | The value of the page that should be active when initially rendered.<br><br>Use when you do not need to control the value state. |
| `disabled` |  | `boolean` | When `true`, prevents the user from interacting with item |
| `itemsPerPage*` |  | `number` | Number of items per page |
| `page` |  | `number` | The controlled value of the current page. Can be binded as `v-model:page`. |
| `showEdges` | `false` | `boolean` | When `true`, always show first page, last page, and ellipsis |
| `siblingCount` | `2` | `number` | Number of sibling should be shown around the current page |
| `total` | `0` | `number` | Number of items in your list |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `update:page` | `value: number` | Event handler called when the page value changes |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `page` | `number` | Current page state |
| `pageCount` | `number` | Number of pages |

[PaginationRoot.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Pagination/PaginationRoot.vue)

### List

Used to show the list of pages. It also makes pagination accessible to assistive technologies.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `items` | `{ type: "ellipsis"; } \| { type: "page"; value: number; }` | Pages item |

[PaginationList.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Pagination/PaginationList.vue)

### Item

Used to render the button that changes the current page. Reka's docs called this part `PaginationItem`; in Akar v2.0.20 the export is `PaginationListItem`.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"button"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `value*` |  | `number` | Value for the page |

[PaginationListItem.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Pagination/PaginationListItem.vue)

| Data attribute | Value |
| --- | --- |
| `[data-selected]` | "true" \\| "" |
| `[data-type]` | "page" |

### Ellipsis

Placeholder element when the list is long, and only a small amount of `siblingCount` was set and `showEdges` was set to `true`.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[PaginationEllipsis.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Pagination/PaginationEllipsis.vue)

| Data attribute | Value |
| --- | --- |
| `[data-type]` | "ellipsis" |

### First

Triggers that set the page value to 1

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"button"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[PaginationFirst.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Pagination/PaginationFirst.vue)

### Prev

Triggers that set the page value to the previous page

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"button"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[PaginationPrev.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Pagination/PaginationPrev.vue)

### Next

Triggers that set the page value to the next page

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"button"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[PaginationNext.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Pagination/PaginationNext.vue)

### Last

Triggers that set the page value to the last page

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"button"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[PaginationLast.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Pagination/PaginationLast.vue)

## Examples

### With ellipsis

You can add `PaginationEllipsis` as a visual cue for more previous and after items.

```vue
<script setup lang="ts">
import { PaginationEllipsis, PaginationList, PaginationListItem, PaginationRoot } from 'akar'
</script>

<template>
  <PaginationRoot>
    <PaginationList v-slot="{ items }">
      <template v-for="(page, index) in items">
        <PaginationListItem
          v-if="page.type === 'page'"
          :key="index"
        />
        <PaginationEllipsis
          v-else
          :key="page.type"
          :index="index"
        >
          &#8230;
        </PaginationEllipsis>
      </template>
    </PaginationList>
  </PaginationRoot>
</template>
```

### With first/last button

You can add `PaginationFirst` to allow user to navigate to first page, or `PaginationLast` to navigate to last page.

```vue
<script setup lang="ts">
import { PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationRoot } from 'akar'
</script>

<template>
  <PaginationRoot>
    <PaginationList>
      <PaginationFirst />
      ...
      <PaginationLast />
    </PaginationList>
  </PaginationRoot>
</template>
```

### Control page programmatically

You can control the current page by passing it a reactive value.

```vue
<script setup lang="ts">
import { PaginationRoot } from 'akar'
import { ref } from 'vue'
import { Select } from './custom-select'

const currentPage = ref(1)
</script>

<template>
  <Select v-model="currentPage" />
  <PaginationRoot v-model:page="currentPage">
    ...
  </PaginationRoot>
</template>
```

## Keyboard Interactions

| Key | Description |
| --- | --- |
| <kbd>Tab</kbd> | Moves focus to the next focusable element. |
| <kbd>Space</kbd> |  When focus is on a any trigger, trigger selected page or arrow navigation  |
| <kbd>Enter</kbd> |  When focus is on a any trigger, trigger selected page or arrow navigation  |

---

- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Pagination)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.