UI Pagination | Mirbal Admin & Dashboard Template

Default Pagination

Use pagination-* class to ul element to indicate a series of related content exists across multiple pages.

<!-- Pagination Primary -->
<nav aria-label="Page navigation example">
  <ul class="pagination pagination-primary mb-0">
    <li class="page-item">
      <a class="page-link page-prev" href="javascript:void(0)"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
    </li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
    <li class="page-item active"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">5</a></li>
    <li class="page-item">
      <a class="page-link page-next" href="javascript:void(0)">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
    </li>
  </ul>
</nav>

<!-- Pagination Secondary -->
<nav aria-label="Page navigation example">
  <ul class="pagination pagination-secondary mb-0">
    <li class="page-item">
      <a class="page-link page-prev" href="javascript:void(0)"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
    </li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
    <li class="page-item active"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">5</a></li>
    <li class="page-item">
      <a class="page-link page-next" href="javascript:void(0)">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
    </li>
  </ul>
</nav>

<!-- Pagination Dark -->
<nav aria-label="Page navigation example">
  <ul class="pagination pagination-dark mb-0">
    <li class="page-item">
      <a class="page-link page-prev" href="javascript:void(0)"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
    </li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
    <li class="page-item active"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">5</a></li>
    <li class="page-item">
      <a class="page-link page-next" href="javascript:void(0)">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
    </li>
  </ul>
</nav>

Disabled Pagination

Use disabled class to ul element to indicate a series of related content exists across multiple pages.

<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-primary mb-0">
        <li class="page-item disabled">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item disabled"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>

Subtle Pagination

Use pagination-*-light class to ul element to indicate a series of related content exists across multiple pages.

<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-primary-light mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-secondary-light mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-secondary-light mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>

Rounded Pagination

Use .pagination-rounded class to ul element to indicate a series of related content exists across multiple pages.

<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-rounded pagination-primary mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-rounded pagination-secondary mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-rounded pagination-dark mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>

Rounded Pagination light

Use the .pagination-rounded and .pagination-light classes on the <ul> element to create soft, rounded pagination with a light color style.

<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-rounded pagination-primary-light mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-rounded pagination-secondary-light mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>
<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-rounded pagination-dark-light mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>

Pagination Sizes

Use .pagination-sm class to ul element to indicate a series of related content exists across multiple pages.

<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-sm mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>

<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-md mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>

<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-lg mb-0">
        <li class="page-item">
             <a class="page-link page-prev" href="#"><i class="ri-arrow-left-s-line fs-22"></i>Prev</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link page-next" href="#">Next<i class="ri-arrow-right-s-line fs-22"></i></a>
        </li>
    </ul>
</nav>

You have a new task

New message from Naomi

Your role has been set to Admin

New message from Robert

Payment received from Jonathan

New comment on your post

New message from Emma

Reminder: Meeting at 3 PM

Newsletter from Marketing

System message: Update complete

Message archived from Clara

Task assigned: UI Design

Submit project report

Task completed: API Integration

Code review: Pending approval

All caught up!

₹299

₹149

₹220

₹40

₹99

₹129

Pagination

Pagination

Page Overview

Default Pagination

Disabled Pagination

Subtle Pagination

Rounded Pagination

Rounded Pagination light

Pagination Sizes

Theme Customization

Layout:

Vertical

Horizontal

Semi Box

Content Width:

Default

Box

Layout Direction:

LTR

RTL

Layout Mode:

Light

Dark

System

Sidebar Size:

Default

Medium

Icon

Icon hover

Sidebar Color

Primary Color