Pagination – Tsunami

Usage

The current page gets a border. Mark it with aria-current="page". A skipped range is a span.

<nav class="pagination" aria-label="Pagination">
  <ul>
    <li><a href="#"><i class="icon icon-chevron-left" aria-hidden="true"></i>Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page">2</a></li>
    <li><a href="#">3</a></li>
    <li><span aria-hidden="true"><i class="icon icon-ellipsis"></i></span></li>
    <li><a href="#">Next<i class="icon icon-chevron-right" aria-hidden="true"></i></a></li>
  </ul>
</nav>

Compact, with the current page marked

For under a table or inside a card. Icon-only links need an aria-label. Mark unavailable links with aria-disabled="true".

<nav class="pagination" data-size="sm" aria-label="Pagination">
  <ul>
    <li><a aria-disabled="true" aria-label="First page"><i class="icon icon-chevrons-left" aria-hidden="true"></i></a></li>
    <li><a href="#" aria-current="page">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#" aria-label="Next page"><i class="icon icon-chevron-right" aria-hidden="true"></i></a></li>
    <li><a href="#" aria-label="Last page"><i class="icon icon-chevrons-right" aria-hidden="true"></i></a></li>
  </ul>
</nav>

Attributes

Attribute / element	Values	Description
`.pagination`	`nav`	Add `aria-label="Pagination"`
`ul > li`	child	One page each, in a row that wraps when narrow
`a`	in `li`	Link to that page. Can hold an `.icon`. Icon-only links need an `aria-label`.
`span`	in `li`	Skipped range (…), gray. Add `aria-hidden="true"`.
`aria-current`	`page`	Current page: bordered, solid in `sm`
`aria-disabled`	`true`	Unavailable link, such as Previous on the first page (no `href`)
`data-size`	unset (default) 36px, borderless · `sm` 28px, every page bordered	Size, compact style