Pagination

An interface that allows navigating between pages that contain split entries.

View code

Features

Full keyboard navigation support
Supports a custom number of pages
Display range of visible pages
Supports a custom number of visible pages
Supports a custom number of sibling pages

Anatomy

Root: The root container for the pagination component
Previous Button: The button which navigates to the previous page
Page Trigger: The button(s) which navigates to a specific page
Next Button: The button which navigates to the next page
Range: The range of pages that are visible to the user

Usage

To create a pagination component, use the createPagination builder function. Follow the anatomy or the example above to create your pagination component.

    <script lang="ts">
  import { createPagination } from '@melt-ui/svelte'
  const { prevButton, nextButton, pages, pageTrigger, range, root } = createPagination({
    count: 100,
    perPage: 10,
    page: 1,
    siblingCount: 1
  })
</script>
 
<nav {...root}>
  <p>Showing items {$range.start} - {$range.end}</p>
  <div>
    <button {...$prevButton}>Prev</button>
    {#each $pages as page (page.key)}
      {#if page.type === 'ellipsis'}
        <span>...</span>
      {:else}
        <button {...$pageTrigger(page)}>{page.value}</button>
      {/if}
    {/each}
    <button {...$nextButton}>Next</button>
  </div>
</nav>

API Reference

createPagination

Props

Prop	Default	Type / Description
`count`	-	`number` The total number of items.
`perPage`	`1`	`number` The number of items per page.
`siblingCount`	`1`	`number` The number of page triggers to show on either side of the current page.
`page`	`1`	`number` The current page number.

Returned Props

Returned Prop	Type	Description
`options`	`Writable<CreatePaginationProps>`	A writable store that controls the pagination options.
`page`	`Writable<number>`	A writable store that controls the current page.
`pages`	`Readable<PageItem[]>`	A readable store that contains the page items.
`range`	`Readable<{start: number; end: number}>`	A readable store that contains the start and end page numbers.
`totalPages`	`Readable<number>`	A readable store that contains the total number of pages.
`root`	-	The builder store used to create the pagination root.
`pageTrigger`	-	The builder store used to create the pagination page trigger.
`prevButton`	-	The builder store used to create the pagination previous button.
`nextButton`	-	The builder store used to create the pagination next button.

root

Data Attributes

Data Attribute	Value
`[data-scope]`	`pagination`
`[data-melt-pagination]`	Present on all pagination elements.

pageTrigger

Data Attributes

Data Attribute	Value
`[data-selected]`	Present when the page is selected.
`[data-melt-pagination-page-trigger]`	Present on all pageTrigger elements.

prevButton

Data Attributes

Data Attribute	Value
`[data-melt-pagination-prev-button]`	Present on all prevButton elements.

nextButton

Data Attributes

Data Attribute	Value
`[data-melt-pagination-next-button]`	Present on all nextButton elements.

Accessibility

Adheres to the a11y Accessible Pagination guidelines

Key	Behavior
`Space`	When focused on a `pageTrigger` or `nextButton`, moves to that page.
`Enter`	When focused on a `pageTrigger` or `nextButton`, moves to that page.
`Tab`	Moves focus to the next focusable element.
`Shift + Tab`	Moves focus to the previous focusable element
`ArrowRight`	Moves focus to the next focusable `pageTrigger` or `nextButton`.
`ArrowLeft`	Moves focus to the previous focusable `pageTrigger` or `prevButton`
`Home`	Moves focus to the first focusable `pageTrigger` or `prevButton`.
`End`	Moves focus to the first focusable `pageTrigger` or `prevButton`.

On This Page