Prose v0

Pagination & Breadcrumbs

Components

Pagination

Use page indicators to give users an idea of the total number of items in their current activity. Page navigation allows users to move through a document or set of results in pre-determined chunks of content.

Accessibility

<nav role="navigation" aria-label="Student list navigation">
  <ul>
    <li><button disabled={current === 1}>Prev</button></li>
    <li><a href="#" aria-label="Page 1">1</a></li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Current page, Page 3" aria-current="true">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li><a href="#" aria-label="Page 5">5</a></li>
    <li><button disabled={current === pages.length}>Next</button></li>
  </ul>
</nav>
  • The <nav> wrapper must contain role="navigation"
  • The <nav> wrapper must contain aria-label describing the pagination
  • Numeric links must contain aria-label; e.g. aria-label="Page 3"
  • The currently active/selected page link must contain aria-current="true"
  • The currently active/selected page link aria-label should look like this aria-label="Current page, Page 3"
  • Chevron navigation buttons should be disabled when the current page number is at the beginning or end respectively

Pagination Medium Number

Use when there are more than 5 pages but not too many where using the chevron to click through would be a nuisance. The medium number is also helpful when a user will need to jump to the first or last page in a sequence. The ellipses (...) is not clickable and cannot be used to search. If the user will need to search for a specific page use the large number component.

Pagination High Number

Use with a high number of pages or If there is a need to jump to a specific page.

Breadcrumbs are used to indicate where within a structure a page resides, and to give users a way to navigate to higher level pages. They are typically seen at the top of screens as a method to orient the user.

Accessibility

<nav role="navigation" aria-label="Section breadcrumbs">
  <ol>
    <li><a href="#">Index</a></li>
    <li><a href="#">Second Page</a></li>
    <li><a href="#" aria-current="page">This Page</a></li>
  </ol>
</nav>
  • The <nav> wrapper must contain role="navigation"
  • The <nav> wrapper must contain aria-label describing the breadcrumbs
  • The last list item link must contain aria-current="page"