Pagination
<gcds-pagination>

Also called: page index, page navigation.

Pagination is a division of content into multiple linked pages.

• GitHub
• Figma

Pagination anatomy

Simple pagination anatomy

Previous link

1. The previous arrow is a visual aid to indicate navigating backward, to previous pages in the page flow.
2. The previous text is the text that accompanies the previous arrow and indicates that the user would be navigating to the previous page in the flow.
3. The previous label indicates the label of the previous page to the user.

Next link

1. The next text is the text that accompanies the next arrow and indicates that the user would be navigating to the next page in the flow.
2. The next arrow is a visual aid indicating that you would be navigating forwards in the page flow.
3. The next label indicates the label of the previous page to the user.

List styled pagination anatomy

Large screens

1. The previous link navigates to the previous page in the flow when selected.
2. A page link navigates to it’s corresponding page in the flow.
3. The current page indicates the page the user is currently on.
4. An ellipsis replaces any pages that are being skipped.
5. The next link navigates to the next page in the flow when selected.

Small screens

1. A page link navigates to it’s corresponding page in the flow.
2. The current page indicates the page the user is currently on.
3. An ellipsis replaces any pages that are being skipped.
4. The previous link navigates to the previous page in the flow when selected.
5. The next link navigates to the next page in the flow when selected.

Previous link

1. The previous arrow is a visual aid to indicate navigating backward, to previous pages in the page flow.
2. The previous text is the text that accompanies the previous arrow and indicates that the user would be navigating to the previous page in the flow.

Next link

1. The next text is the text that accompanies the next arrow and indicates that the user would be navigating to the next page in the flow.
2. The next arrow is a visual aid indicating that you would be navigating forwards in the page flow.

Design and accessibility for pagination

Make pagination content findable

• Put the most important information on the first few pages so there is a lower chance of it being missed.
• Place the pagination component immediately under the page content you’re displaying, aligned to the left.
• Ensure the navigational links appear as a single row and don't wrap onto the next line.

Use simple pagination for a small number of pages

Simple pagination is most suitable for 2-5 pages.

• Use subheadings in simple pagination to let the user know where they are in the flow.
• Include the page number and total number of pages, or the page title in the subheading to give more more context.

Use list styled pagination for a large number of pages

Use list styled pagination for large numbers of pages when using the ‘Previous’ and ‘Next’ links would make navigation cumbersome.