Navigation controls for moving between pages of content.
···
<div class="pag"> <button class="pag-btn"><span class="material-icons-round">chevron_left</span></button> <button class="pag-btn active">1</button> <button class="pag-btn">2</button> <button class="pag-btn">3</button> <div class="pag-ellipsis">···</div> <button class="pag-btn">10</button> <button class="pag-btn"><span class="material-icons-round">chevron_right</span></button> </div>
Installation
Built with pure HTML and CSS. Include ds-shared.css in your project.
pnpm add @norbielink/ds
API Reference
Classes
| Class | Description |
|---|---|
pag | Flex row container |
pag-btn | Page number or nav button |
pag-btn.active | Current page (purple gradient, 28×28px, radius 8px) |
pag-btn.disabled | Non-interactive (prev on page 1) |
pag-ellipsis | "···" gap indicator |
pag-dk | Dark mode modifier |