Pagination Component

The traditional paging to divide content into numbered pages or indicate that there is a series of related content on several pages.

This component does not include custom colors. It is only available in blue.

Example:

<nav class="e-pagination" aria-label="pagination">

  <div class="e-page-content">
    <a class="e-page-item">Previous</a>
    <a class="e-page-item">Next page</a>
  </div>

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
    <li class="e-page-item on-page">
      <a aria-label="Goto page 2">2</a>
    </li>
  </ul>

</nav>

Disabled:

<nav class="e-pagination" aria-label="pagination">

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
    <li class="e-page-item on-page">
      <a aria-label="Goto page 2">2</a>
    </li>
  </ul>

  <div class="e-page-content">
    <a class="e-page-item" disabled>Previous</a>
    <a class="e-page-item">Next page</a>
  </div>

</nav>

Variations

<nav class="e-pagination" aria-label="pagination">
  <a class="e-page-item" disabled>Previous</a>

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
    <li class="e-page-item on-page">
      <a aria-label="Goto page 2">2</a>
    </li>
  </ul>

  <a class="e-page-item">Next page</a>
</nav>

Unified

Add unified to unify container elements e-page-content

<nav class="e-pagination" aria-label="pagination">
  <ul class="e-page-content unified">
    <a class="e-page-item" disabled>Previous</a>
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
    <li class="e-page-item on-page">
      <a aria-label="Goto page 2">2</a>
    </li>
    <a class="e-page-item">Next page</a>
  </ul>
</nav>

<nav class="e-pagination" aria-label="pagination">
  <div class="e-page-content unified">
    <a class="e-page-item">Previous</a>
    <a class="e-page-item">Next page</a>
  </div>

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
    <li class="e-page-item on-page">
      <a aria-label="Goto page 2">2</a>
    </li>
  </ul>
</nav>

Sizes

Add different sizes to the page.

small

<nav class="e-pagination small" aria-label="pagination">

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
  </ul>

</nav>

plus

<nav class="e-pagination plus" aria-label="pagination">

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
  </ul>

</nav>

Alignments

Change the alignment of pagination components with Alignments utilities.

Centered

<nav class="e-pagination centered" aria-label="pagination">
  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
  </ul>
</nav>

Align-end

<nav class="e-pagination align-end" aria-label="pagination">
  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
  </ul>
</nav>

Contribute on GitHub

Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

One-time donation

Donate

Serious sponsor

Become a Patron