Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Both Ellipsis Pagination for Vue

Page 6 of 20, with Previous, page 1, an ellipsis, pages 5 to 7, another ellipsis, page 20, and Next.

UI library: Ark UI

The row shows Previous, page 1, an ellipsis, pages 5, 6, and 7, another ellipsis, page 20, and Next. Page 6 is current. Neither ellipsis is a link.

Use it deep in a long list so the row stays a similar width. A Select can jump to a page when even this row is too wide. In Vue, Ark UI does not pick page 6. You mark the current page.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Pagination anatomy: root, previous, item, ellipsis, next

Usage

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
    <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink href="#">5</PaginationLink></PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" :isActive="true">6</PaginationLink>
    </PaginationItem>
    <PaginationItem><PaginationLink href="#">7</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink href="#">20</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>

FAQ

Which pages does this row show?

PaginationPrevious, page 1, a PaginationEllipsis, pages 5, 6 and 7, a second PaginationEllipsis, page 20, and PaginationNext. Page 6 has isActive, so that link is outline and aria-current="page".

Why are there two ellipses?

The numbers are written out by hand. One PaginationEllipsis sits after page 1, and the other sits before page 20. Each is an aria-hidden span with a more-horizontal icon, not a link.

How do I move the current page?

Change 5, 6 and 7, and put isActive on the current PaginationLink. Leave the links for 1 and 20 at the ends, with an ellipsis in each gap.

How do I give each control a real URL?

Every href here is #. Set href on PaginationPrevious, each numbered PaginationLink, and PaginationNext.

How do Previous and Next know the ends of the list?

In this file they are ordinary links with href="#". Page 6 is only marked with isActive. Pass count and bind v-model:page. Previous and Next then disable themselves at the ends.

How do I rename Previous and Next?

Pass text on PaginationPrevious and PaginationNext. They default to "Previous" and "Next", with accessible names "Go to previous page" and "Go to next page". The nav is labeled "pagination".

API Reference

Pagination

Sets href="#" and isActive. The rest is on the Pagination page.

All 19 pagination examples