Components

Pagination

Pagination gives users a compact way to move between pages in blog listings, category pages, search results, and other repeated content views.

Basic structure

Bootstrap pagination classes are defined in assets/css/core.css. Wrap pagination in a nav element and mark the current page with aria-current="page".

Part	Class	Use
List wrapper	`.pagination`	Creates the horizontal pagination list.
List item	`.page-item`	Wraps each pagination control.
Page link	`.page-link`	Styles each pagination link or current page.
Current page	`.page-link.current`	Marks the active page number.

<nav aria-label="Blog Pagination">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
      </a>
    </li>
    <li class="page-item"><span aria-current="page" class="page-link current">1</span></li>
    <li class="page-item"><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="#" aria-label="Next">
        <span aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
      </a>
    </li>
  </ul>
</nav>

Basic structure

Tailwind pagination classes are defined in src/assets/css/input.css. Wrap pagination in a nav element and mark the current page with aria-current="page".

Part	Class	Use
List wrapper	`.pagination`	Creates the horizontal pagination list.
List item	`.page-item`	Wraps each pagination control.
Page link	`.page-link`	Styles each pagination link or current page.
Current page	`.page-link.current`	Marks the active page number.

<nav aria-label="Blog Pagination">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
      </a>
    </li>
    <li class="page-item"><span aria-current="page" class="page-link current">1</span></li>
    <li class="page-item"><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="#" aria-label="Next">
        <span aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
      </a>
    </li>
  </ul>
</nav>

Breadcrumb

Credits