Foundation CSS Pagination

Foundation CSS Pagination provides a user-friendly way to navigate through multiple pages of content. It allows users to easily move between pages and provides visual indicators of the current page and the total number of pages. Here's how to implement pagination in your Foundation CSS project:

1. Markup

Start by adding the necessary HTML markup for the pagination component.

<ul class="pagination" role="navigation" aria-label="Pagination">
  <li class="disabled"><span class="ellipsis">…</span></li>
  <li class="current"><span aria-current="page">1</span></li>
  <li><a href="#" aria-label="Page 2">2</a></li>
  <li><a href="#" aria-label="Page 3">3</a></li>
  <li class="ellipsis"><span>…</span></li>
  <li><a href="#" aria-label="Next page">Next</a></li>
</ul>

2. Styling

Style the pagination component using CSS to match your website's design.

.pagination {
  display: flex;
  list-style: none;
  padding-left: 0;
}

.pagination li {
  margin-right: 0.5rem;
}

.pagination a, .pagination span {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
}

.pagination a:hover {
  background-color: #f0f0f0;
}

.pagination .current span {
  background-color: #007bff;
  color: #fff;
  border: 1px solid #007bff;
}

.pagination .ellipsis {
  margin-right: 0;
}

3. JavaScript (Optional)

If you want to enhance the pagination with dynamic behavior, such as fetching new pages via AJAX or updating the UI based on user interaction, you can use JavaScript.

// Example JavaScript code for handling pagination interaction
document.querySelectorAll('.pagination a').forEach(link => {
  link.addEventListener('click', function(event) {
    event.preventDefault();
    // Add logic to handle pagination navigation
    console.log('Navigating to page', this.textContent);
  });
});

Conclusion

Foundation CSS Pagination provides a simple and effective way to paginate through content in your web application. By following these steps and customizing the markup and styles to fit your project's design, you can easily implement pagination that enhances user experience and improves navigation.

Archive