Pagination
Move between pages of results.
Basic
<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>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/pagination.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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".