Pagination

The pagination lets users move through pages of content, with previous and next links and direct links to nearby pages.

<nav class="pagination">
  <a href="#" class="pagination-item pagination-previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
    <span class="hidden sm:block">Previous</span>
  </a>
  <a href="#" class="pagination-item">1</a>
  <a href="#" class="pagination-item active">2</a>
  <a href="#" class="pagination-item">3</a>
  <span class="pagination-ellipsis">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
    <span class="sr-only">More pages</span>
  </span>
  <a href="#" class="pagination-item pagination-next">
    <span class="hidden sm:block">Next</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </a>
</nav>

Usage

Add the pagination class to a <nav> and put one pagination-item link per page inside. Mark the current page's link with the active class.

Class	Description
`pagination`	Add to the `<nav>` holding the links
`pagination-item`	Add to each `<a>`; add `active` to the current page
`pagination-sm`	Add to `pagination` for compact items
`pagination-previous` `pagination-next`	Add to `pagination-item` for the previous and next links
`pagination-ellipsis`	Add to a `<span>` standing in for skipped pages

<nav class="pagination">
  <a href="#" class="pagination-item">1</a>
  <a href="#" class="pagination-item active">2</a>
  <a href="#" class="pagination-item">3</a>
</nav>

Examples

Simple

A simple pagination with only page numbers.

<nav class="pagination">
  <a href="#" class="pagination-item">1</a>
  <a href="#" class="pagination-item active">2</a>
  <a href="#" class="pagination-item">3</a>
  <a href="#" class="pagination-item">4</a>
  <a href="#" class="pagination-item">5</a>
</nav>

Icons only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page select.

<div class="flex w-full max-w-lg items-center justify-between gap-4">
  <div class="field field-horizontal w-fit">
    <label class="label" for="pagination-rows-per-page">Rows per page</label>
    <select class="select w-20" id="pagination-rows-per-page">
      <option>10</option>
      <option selected>25</option>
      <option>50</option>
      <option>100</option>
    </select>
  </div>
  <nav class="pagination">
    <a href="#" class="pagination-item pagination-previous">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
      <span class="hidden sm:block">Previous</span>
    </a>
    <a href="#" class="pagination-item pagination-next">
      <span class="hidden sm:block">Next</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </a>
  </nav>
</div>