Pagination

A simple and accessible pagination component, allowing users to navigate through multiple pages of content.

<nav aria-label="Page navigation example">
   <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></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="#">Next</a></li>
   </ul>
</nav>

Key Features

  1. Semantic HTML: <nav> element with aria-label provides context for screen readers, enhancing accessibility.

  2. Pagination List: Organized within a <ul class="pagination"> for easy styling and structure.

  3. Interactive Page Links: Each <a class="page-link"> element within <li class="page-item"> serves as a navigable link to different pages.

  4. Navigation Controls: "Previous" and "Next" links facilitate sequential navigation through paginated content.

  5. Clear Structure: A clean and intuitive layout helps users understand and interact with the pagination component effectively.

Last updated