Pagination

How it works

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages. We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links.

Basic example

Use the border spinners for a lightweight loading indicator.

<x-pagination>
    <x-pagination.item label="Previous" disabled />
    <x-pagination.item to="/docs/components/pagination?page=1" label="1" />
    <x-pagination.item to="/docs/components/pagination?page=2" label="2" />
    <x-pagination.item to="/docs/components/pagination?page=3" label="3" />
    <x-pagination.item to="/docs/components/pagination?page=4" label="Next" />
</x-pagination>

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link">Previous</a>
  </li>

  <li class="page-item">
    <a href="https://docs.laraloop.com/docs/components/pagination?page=1"
        class="page-link">1</a>
  </li>

  <li class="page-item">
    <a href="https://docs.laraloop.com/docs/components/pagination?page=2"
        class="page-link">2</a>
  </li>

  <li class="page-item">
    <a href="https://docs.laraloop.com/docs/components/pagination?page=3"
        class="page-link">3</a>
  </li>

  <li class="page-item">
    <a href="https://docs.laraloop.com/docs/components/pagination?page=4"
        aria-current="page"
        class="active page-link">Next</a>
  </li>
</ul>

Important notes regarding active status

You have notice that we are using prop to for set URL. In this case will be used the x-link component which set automatically the current page. You can see this by clicking to pagination links. So you can pass also the route name and optional params.

Bootstrap set the active link to .page-item and not .page-link. So the x-link component that add active class to itself would not be styled. I have made a PR which style also .page-link with active class, and is now part of Bootstrap core. In case your Bootstrap version doesn't include this addition, you can either set active prop yourself to x-pagination.item or add below SCSS code:

.page-link  {
    &.active,
    .active > & {
        z-index: 3;
        color: $pagination-active-color;
        @include gradient-bg($pagination-active-bg);
        border-color: $pagination-active-border-color;
    }

    &.disabled,
    .disabled > & {
        color: $pagination-disabled-color;
        pointer-events: none;
        background-color: $pagination-disabled-bg;
        border-color: $pagination-disabled-border-color;
    }
}

You should find also this code commented in file resources/scss/bootstrap/_pagination.scss.