Pagination

Page navigation links and an accessible ellipsis. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• pagination, pagination-list, pagination-item, pagination-link, pagination-ellipsis, pagination-ellipsis-label

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<nav class="pagination" aria-label="Pages">
  <ol class="pagination-list">
    <li class="pagination-item"><a class="pagination-link" href="?page=1" aria-current="page">1</a></li>
    <li class="pagination-item"><a class="pagination-link" href="?page=2">2</a></li>
    <li class="pagination-item">
      <span class="pagination-ellipsis">
        <span aria-hidden="true">…</span>
        <span class="pagination-ellipsis-label">More pages</span>
      </span>
    </li>
  </ol>
</nav>

Variants and composition

pagination-link carries actual URLs and aria-current. pagination-ellipsis is noninteractive, with a readable pagination-ellipsis-label.

Behavior and accessibility

Use named navigation, aria-current=page for the current link, and a readable label for the ellipsis. The application supplies URLs and boundary behavior.

Reference

See the interactive Storybook specimen ↗. Continue to Popover or return to the Official preset overview.