Pagination

Guidance

Use pagination to break large lists of content (like search results) across a series of pages. This can help prevent your content from becoming too long and overwhelming. Consider using pagination when a list has more than 10 items. Pagination provides the user with the total number of pages, a way to navigate between the pages, and indicates which page they are currently on.

Pagination must be placed at the bottom of your content list.

Pagination

First active

The previous arrow is hidden when the user is on the first page.

• 1
• 2
• 3
• Next

<ul class="gnb-pagination">
	<li class="active">1</li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li>
		<a href="#" class="next" title="Next"><span class="visually-hidden">Next</span></a>
	</li>
</ul>

Middle active

The previous arrow becomes active after the user navigates to page 2 or higher.

• Previous
• 1
• 2
• 3
• Next

<ul class="gnb-pagination">
	<li>
		<a href="#" class="previous" title="Previous"><span class="visually-hidden">Previous</span></a>
	</li>
	<li><a href="#">1</a></li>
	<li class="active">2</li>
	<li><a href="#">3</a></li>
	<li>
		<a href="#" class="next" title="Next"><span class="visually-hidden">Next</span></a>
	</li>
</ul>

Last active

The next arrow is hidden when the user is on the last page.

• Previous
• 1
• 2
• 3

<ul class="gnb-pagination">
	<li>
		<a href="#" class="previous" title="Previous"><span class="visually-hidden">Previous</span></a>
	</li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li class="active">3</li>
</ul>

Pagination with more than 5 pages

When there are more than 5 pages, truncate the list of page numbers.

• Previous
• 1
• 2
• 3
• 4
• 25
• Next

<ul class="gnb-pagination">
	<li>
		<a href="#" class="previous" title="Previous"><span class="visually-hidden">Previous</span></a>
	</li>
	<li><a href="#">1</a></li>
	<li class="active">2</li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#" class="last">25</a></li>
	<li>
		<a href="#" class="next" title="Next"><span class="visually-hidden">Next</span></a>
	</li>
</ul>

Page 5 or higher active

When there are more than 5 pages, truncate the list of page numbers on both ends when page 5 or higher is active.

• Previous
• 1
• 9
• 10
• 11
• 25
• Next

<ul class="gnb-pagination">
	<li>
		<a href="#" class="previous" title="Previous"><span class="visually-hidden">Previous</span></a>
	</li>
	<li><a href="#" class="first">1</a></li>
	<li><a href="#">9</a></li>
	<li class="active">10</li>
	<li><a href="#">11</a></li>
	<li><a href="#" class="last">25</a></li>
	<li>
		<a href="#" class="next" title="Next"><span class="visually-hidden">Next</span></a>
	</li>
</ul>