“Pagination” Component

Design: zeplin.

Pagination is used for navigation when content is split up into multiple pages. It’s usually used to prevent information overload and reduce load time.

Variations

1. Standard Pagination

The standard pagination control contains several elements:

• Previous and next buttons, indicated by chevron icons,
• Page numbers for navigation, and
• Truncation for cases where there are more pages than can be displayed on the pagination control.

Paginations are aligned center of the page.

2. Simple Pagination

The simple pagination contains only “Previous” and “Next” ghost buttons with no page numbers. It’s used in pages where performance matters or where there are a lot of pages, since it does not require a database query to display the page numbers in order to be properly displayed and operable.

3. Accessibility notes

When pagination control is part of main navigation it’s a good practice to wrap such control with <nav> element.

<nav role="navigation" aria-label="My Pagination Navigation">
    {{ $lengthAwarePaginatedResults->links() }}
</nav>

Usage

We use a customized version of the pagination from Laravel.

$lengthAwarePaginatedResults = Article::published()->paginate();
$simplePaginatedResults = Article::published()->simplePaginate();

{{ $lengthAwarePaginatedResults->links() }}
{{ $simplePaginatedResults->links() }}