##### Default Pagination

Use `pagination-*` 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">
                <a class="page-link" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></i>
                </a>
            </li>
        </ul>
    </nav>

    <!-- Pagination -->
    <nav aria-label="Page navigation example">
        <ul class="pagination pagination-dark mb-0">
            <li class="page-item">
                <a class="page-link" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></i>
                </a>
            </li>
        </ul>
    </nav>

    <!-- Pagination -->
    <nav aria-label="Page navigation example">
        <ul class="pagination pagination-light mb-0">
            <li class="page-item">
                <a class="page-link" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></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" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></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" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- Pagination -->
    <nav aria-label="Page navigation example">
        <ul class="pagination pagination-dark-light mb-0">
            <li class="page-item">
                <a class="page-link" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></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" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></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" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></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" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- Pagination -->
    <nav aria-label="Page navigation example">
        <ul class="pagination pagination-rounded pagination-light mb-0">
            <li class="page-item">
                <a class="page-link" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></i>
                </a>
            </li>
        </ul>
    </nav>

##### Rounded Pagination light

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-light mb-0">
            <li class="page-item">
                <a class="page-link" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></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" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- Pagination -->
    <nav aria-label="Page navigation example">
        <ul class="pagination pagination-rounded pagination-light-light mb-0">
            <li class="page-item">
                <a class="page-link" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></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" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></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" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></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" href="#">
                    <i class="ri-arrow-left-s-line fw-semibold"></i>
                </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" href="#">
                    <i class="ri-arrow-right-s-line fw-semibold"></i>
                </a>
            </li>
        </ul>
    </nav>

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:

##### Light

##### Dark