@ithaka/bonsai/documentation/pages/components/pagination.md

ITHAKA core styling

---
title: Pagination
description: Pagination is the process of dividing a document into discrete pages. The numbers or marks used to indicate the sequence of pages are clickable allowing the user to access the discrete page. Pagination should be used over endless scrolling to support goal-oriented finding tasks.
foundation: http://foundation.zurb.com/sites/docs/pagination.html
sass: ./scss/_pagination.scss
---

## How to Use

### First Usage
Note that the `disabled` class is added to the Previous link since there is no previous page.

```html_example
<ul class="pagination">
    <li class="pagination-previous disabled" rel=”prev”>Previous<span class="show-for-sr">page</span></li>
    <li><span class="show-for-sr">page</span><strong>1</strong> of 1,161</li>
    <li class="pagination-next" rel=”next”>
        <a href="#">Next<span class="show-for-sr">page</span></a>
    </li>
</ul>
```

### General Usage

```html_example
<ul class="pagination">
    <li class="pagination-previous" rel=”prev”>
        <a href="#">Previous<span class="show-for-sr">page</span></a>
    </li>
    <li><span class="show-for-sr">page</span><strong>2</strong> of 1,161</li>
    <li class="pagination-next" rel=”next”>
        <a href="#">Next<span class="show-for-sr">page</span></a>
    </li>
</ul>
```

## Accessibility
1. To provide context and a navigation landmark for a screen reader, add the role attribute to the `ul`.
1. The `aria-label` attribute will allow a screen reader to call out what the component is to the user.
1. Add `rel` attributes to the next and previous page links, if they exist, to make their relationship with the current page crystal clear.
1. Use class `show-for-sr` to describe the function of each link.

## Guidelines
1. The arrows should only show if there are further or prior pages
1. Space out page links or buttons for finger friendly touch targets.
1. Include a visual indicator that clearly identifies the current page.
1. Pagination should be included at the bottom of the page.  When possible, repeat pagination at the top of the page.