Pagination

Page navigation controls with size and style variants.

Default pagination

Use na-pagination on a <nav> or <ul>. Add na-active to the current page link and na-disabled (or the --disabled modifier) to previous/next when at the boundary.

<nav aria-label="Page navigation">
  <ul class="na-pagination">
    <li class="na-pagination-item">
      <a class="na-pagination-link na-disabled" aria-label="Previous">-</a>
    </li>
    <li class="na-pagination-item">
      <a href="?page=1" class="na-pagination-link na-active" aria-current="page">1</a>
    </li>
    <li class="na-pagination-item">
      <a href="?page=2" class="na-pagination-link">2</a>
    </li>
    <li class="na-pagination-item">
      <a href="?page=2" class="na-pagination-link" aria-label="Next">-</a>
    </li>
  </ul>
</nav>

Sizes

<ul class="na-pagination na-pagination-s">...</ul>
<ul class="na-pagination">...</ul>            <!-- default -->
<ul class="na-pagination na-pagination-l">...</ul>

Pill variant

<ul class="na-pagination na-pagination-pill">...</ul>

Simple (borderless)

<ul class="na-pagination na-pagination-simple">...</ul>

Class reference

Class	Description
`na-pagination`	Pagination row wrapper
`na-pagination-s`	Small size
`na-pagination-l`	Large size
`na-pagination-pill`	Fully rounded links
`na-pagination-simple`	Borderless style
`na-pagination-item`	List item wrapper (optional)
`na-pagination-link`	Individual page link or button
`na-active`	Highlights current page link
`na-disabled`	Greys out prev/next at boundary