Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Paginering
Eksempler og retningslinjer
Installation
HTML Struktur
Kodeeksempel
<nav class="pagination" id="pagination-ID" aria-label="Pagineringseksempel med 12 sider">
<a href="#"
class="button button-arrow button-first"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#first-page"></use></svg><span
class="sr-only">Første side</span></a>
<a href="#" class="button button-arrow button-previous" aria-label="Forrige side">
<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#chevron-left"></use></svg><span
class="pagination-nav-link">Forrige</span>
</a>
<span class="pagination-mobile">Side 8 af 12</span>
<ul class="pagination__items">
<li class="pagination-item pagination-number">
<a href="#" class="button button-secondary" aria-label='Side 1'>1</a>
</li>
<li class="pagination-item pagination-overflow" role="presentation">
<span>...</span>
</li>
<li class="pagination-item pagination-number">
<a href="#" class="button button-secondary" aria-label='Side 7'>7</a>
</li>
<li class="pagination-item pagination-number">
<a href="#" class="button current-page" aria-label='Side 8'
aria-current="page">8</a>
</li>
<li class="pagination-item pagination-number">
<a href="#" class="button button-secondary" aria-label='Side 9'>9</a>
</li>
<li class="pagination-item pagination-overflow" role="presentation">
<span>...</span>
</li>
<li class="pagination-item pagination-number">
<a href="#" class="button button-secondary"
aria-label='Sidste side, side 12'>12</a>
</li>
</ul>
<a href="#" class="button button-arrow button-next" aria-label="Næste side">
<span
class="pagination-nav-link">Næste</span><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#chevron-right"></use></svg>
</a>
<a href="#"
class="button button-arrow button-last"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#last-page"></use></svg><span
class="sr-only">Sidste side</span></a>
</nav>
Brug class="hidden"
på Forrige-, Næste-, Første- og Sidste-knapperne, når de ikke skal vises.
Tilgængelighed
Lad knappen med tallet til sidste side indeholde en aria-label, der oplyser dette. Husk at lade den aktuelle side være markeret med aria-current="page"
.
Sørg for at alle Forrige-, Næste-, Første- og Sidste-knapper på mindre skærme har en skjult, tilknyttet tekst, så ikonerne kan læses højt af en skærmlæser.
JavaScript
Bemærk at DKFDS på nuværende tidspunkt kun leverer HTML og CSS til denne komponent. Funktionaliteten skal man derfor selv håndtere.