# Pagination · MIAN

Move between pages of results.

- Id: `pagination` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/pagination
- Use for: pagination, next previous, page numbers, results pages.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-pagination`: On a <nav>.
- `mn-page`: A page link or button. aria-current="page" marks the current one.
- `mn-page-ellipsis`: Gap.

## Accessibility

- <nav aria-label="Pagination">. Give arrows text labels. Disabled links use aria-disabled="true".

## Examples

### Basic

```html
<nav class="mn-pagination" aria-label="Pagination"><ul>
  <li><a class="mn-page" href="#pagination" aria-disabled="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg><span>Previous</span></a></li>
  <li><a class="mn-page" href="#pagination" aria-current="page">1</a></li>
  <li><a class="mn-page" href="#pagination">2</a></li>
  <li><a class="mn-page" href="#pagination">3</a></li>
  <li><span class="mn-page-ellipsis" aria-hidden="true">…</span></li>
  <li><a class="mn-page" href="#pagination">12</a></li>
  <li><a class="mn-page" href="#pagination"><span>Next</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></a></li>
</ul></nav>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/pagination/source