Pagination

wu-pagination lays out page links built from buttons. Use a <nav aria-label="Pagination"> around a list of wu-btn links.

Class or attribute	Effect
`wu-pagination`	Root, on `<nav>`. Wrapping row of the list and the parts beside it
`wu-pagination-list`	Part, on `<ul>`. Wrapping row
`wu-pagination-ellipsis`	Part. Muted gap marker, as wide as a page link
`aria-current="page"` on a link	Current page, brand fill
`aria-disabled="true"` on a link	Unavailable previous or next link
`wu-pagination-prev`, `wu-pagination-next`	Parts, on the previous and next links. Draw an arrow, mirrored in right to left
`wu-pagination-total`	Part. Muted total count
`wu-pagination-size`	Part, on a `<label>` holding a `wu-select`. Page size picker
`sm`, `lg`	Small and large page links

Default

<nav class="wu-pagination" aria-label="Pagination">
  <ul class="wu-pagination-list">
    <li><a class="wu-btn" href="#" aria-disabled="true">Previous</a></li>
    <li><a class="wu-btn" href="#" aria-current="page">1</a></li>
    <li><a class="wu-btn" href="#">2</a></li>
    <li><a class="wu-btn" href="#">3</a></li>
    <li><span class="wu-pagination-ellipsis" aria-hidden="true">...</span></li>
    <li><a class="wu-btn" href="#">12</a></li>
    <li><a class="wu-btn" href="#">Next</a></li>
  </ul>
</nav>

Arrows

wu-pagination-prev and wu-pagination-next draw an arrow before or after the link text. An arrow-only link needs an aria-label.

<nav class="wu-pagination" aria-label="Pagination">
  <ul class="wu-pagination-list">
    <li><a class="wu-btn wu-pagination-prev" href="#" aria-label="Previous page"></a></li>
    <li><a class="wu-btn" href="#">1</a></li>
    <li><a class="wu-btn" href="#" aria-current="page">2</a></li>
    <li><a class="wu-btn" href="#">3</a></li>
    <li><a class="wu-btn wu-pagination-next" href="#" aria-label="Next page"></a></li>
  </ul>
</nav>

Total and page size

Put wu-pagination-total and wu-pagination-size beside the list, in the order you want. Reload the page from the select’s change event in your app.

<nav class="wu-pagination" aria-label="Pagination">
  <span class="wu-pagination-total">Total 400</span>
  <ul class="wu-pagination-list">
    <li><a class="wu-btn wu-pagination-prev" href="#" aria-disabled="true">Previous</a></li>
    <li><a class="wu-btn" href="#" aria-current="page">1</a></li>
    <li><a class="wu-btn" href="#">2</a></li>
    <li><span class="wu-pagination-ellipsis" aria-hidden="true">...</span></li>
    <li><a class="wu-btn" href="#">40</a></li>
    <li><a class="wu-btn wu-pagination-next" href="#">Next</a></li>
  </ul>
  <label class="wu-pagination-size">
    <select class="wu-select sm">
      <option>10</option>
      <option>20</option>
      <option>50</option>
    </select>
    per page
  </label>
</nav>

Sizes

<div class="flex col gap-4">
  <nav class="wu-pagination sm" aria-label="Pagination, small">
    <ul class="wu-pagination-list">
      <li><a class="wu-btn" href="#">1</a></li>
      <li><a class="wu-btn" href="#" aria-current="page">2</a></li>
      <li><a class="wu-btn" href="#">3</a></li>
    </ul>
  </nav>
  <nav class="wu-pagination lg" aria-label="Pagination, large">
    <ul class="wu-pagination-list">
      <li><a class="wu-btn" href="#">1</a></li>
      <li><a class="wu-btn" href="#" aria-current="page">2</a></li>
      <li><a class="wu-btn" href="#">3</a></li>
    </ul>
  </nav>
</div>

Right to left

The list starts at the right and the arrows point the other way.

<nav class="wu-pagination" aria-label="דפדוף">
  <span class="wu-pagination-total">סך הכול 40</span>
  <ul class="wu-pagination-list">
    <li><a class="wu-btn wu-pagination-prev" href="#" aria-label="העמוד הקודם"></a></li>
    <li><a class="wu-btn" href="#" aria-current="page">1</a></li>
    <li><a class="wu-btn" href="#">2</a></li>
    <li><a class="wu-btn wu-pagination-next" href="#" aria-label="העמוד הבא"></a></li>
  </ul>
</nav>

Load only the pagination

@use "@wovenui/components/pagination";

The pagination needs the button. The page size picker also uses the select, which you load yourself. The entry loads the pagination and the button; in the bundle, switching button off while pagination is on stops the compile with an error.