Pagination

Correct use

Compliance point(s):

• Use .pagination to number the separate pages of a large content section
• Ensure the pagination is always left-aligned
• Ensure the navigational links appear as a single row and don't wrap, unless there is a valid reason to do so
• Add invisible text using <span class"wb-inv"> to make the links descriptive
• Ensure there is a space between the pagination number and <span class"wb-inv"> to ensure screen readers correctly interpret the code
• Understand and implement the related supporting principles

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<ul class="pagination">
  <li><a href="#" rel="prev">Previous</a></li>
  <li><a href="#">1 <span class="wb-inv">Go to Page 1</span></a>
  <li><a href="#">2 <span class="wb-inv">Go to Page 2</span></a></li>
  <li><a href="#" rel="next">Next</a></li>
</ul>

Correct use

Compliance point(s):

• Use .active to indicate the current page the user is on within the pagination

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<ul class="pagination">
  <li><a href="#" rel="prev">Previous</a></li>
  <li class="active"><a href="#">1 <span class="wb-inv">(current) Go to Page 1</span></a></li>
  ...
</ul>

Correct use

Compliance point(s):

• Use .disabled for unclickable (hidden) links within the pagination

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<ul class="pagination">
  <li class="disabled"><a href="#" rel="prev">Previous</a></li>
  <li><a href="#">1 <span class="wb-inv">Go to Page 1</span></a></li>
  ...
</ul>

Correct use

Compliance point(s):

• Default sizing: Use for typical pagination
• Small buttons: Use when the pagination appears in a small section of space. This reduces the button size to maximize the amount of buttons that appear in a single row
• Large button: Use when the pagination needs additional prominence on the page. Since the default buttons already create prominence and a call to action, there is limited value/need to increasing their size

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

// Default:
<ul class="pagination">...</ul>

// Large:
<ul class="pagination pagination-lg">...</ul>

// Small:
<ul class="pagination pagination-sm">...</ul>

Correct use

Compliance point(s):

• Use .pager when there is a need to only link to the "Previous" or "Next" page
• Use .previous and .next within the <li> elements to fully justify the <ul class="pager" links
• Understand and implement the related supporting principles

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

// Default:
<ul class="pager">
  <li><a href="#" rel="prev">Previous</a></li>
  <li><a href="#" rel="next">Next</a></li>
</ul>

// Full justification buttons:
<ul class="pager">
  <li class="previous"><a href="#" rel="prev">Previous</a></li>
  <li class="next"><a href="#" rel="next">Next</a></li>
</ul>

// Disabled state (hidden "Previous"):
<ul class="pager">
  <li class="previous disabled"><a href="#" rel="prev">Previous</a></li>
  <li class="next"><a href="#" rel="next">Next</a></li>
</ul>