juxt.ui

Navigation

Pagination

Moves through a paged list. The page window collapses to an ellipsis once the total grows past what fits.

Copy
<script setup lang="ts">
const page = ref(1)
</script>

<template>
  <JPagination v-model="page" :total="10" />
</template>

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

Copy
import { JPagination } from '@juxtui/ui'

Usage #

Copy
<JPagination v-model="page" :total="10" />

How many neighbours stay visible around the current page is set with sibling-count — past that, both ends collapse to an ellipsis independently.

Variants & examples #

Sibling count#

A longer trail with sibling-count="2" and the compact sm size.

Copy
<script setup lang="ts">
const page = ref(12)
</script>

<template>
  <JPagination v-model="page" :total="30" :sibling-count="2" size="sm" />
</template>

Disabled#

Copy
<script setup lang="ts">
const page = ref(3)
</script>

<template>
  <JPagination v-model="page" :total="8" disabled />
</template>

API #

Props

PropTypeDefault Description
modelValuenumber1Current page, bound with v-model.
totalnumber—Total number of pages. Required.
siblingCountnumber1Pages shown on each side of the current page before collapsing to an ellipsis.
labelstring'Pagination'Accessible name for the nav landmark.
size'sm' | 'md''md'Button size.
disabledbooleanfalseDisables every control.

Events

EventPayload Description
update:modelValuenumberEmitted when the current page changes.

Accessibility #

  • Wrapped in a <nav> landmark labelled “Pagination” by default.
  • Previous and next controls have accessible names and disable themselves at either end.
  • The current page button carries aria-current="page"; every page button has an aria-label naming its number.
  • Ellipsis markers are decorative and hidden from screen readers.

Keyboard #

Key Action
HomeFrom a page button, jumps to the first page.
EndFrom a page button, jumps to the last page.