Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Paginering
Paginering bruges til at lade brugeren navigere mellem indhold, der er opdelt på flere sider. Brugeren navigerer ved at gå fra side til side, eller til første eller sidste side på listen.
Sådan bruges komponenten
Anvendes til
Paginering kan anvendes ved søgeresultater og lignende lister, hvor brugerens overblik lettes ved at opdele indholdet over flere sider.
Anvendes ikke til
Anvendes ikke til at føre brugeren igennem flere dele af en formular. Anvend da i stedet trinindikator.
Vejledning
Vis altid både den første og den sidste side i det paginerede indhold, så brugeren kan få et overblik over den samlede mængde.
7 eller færre sider
Vis alle sider hvis der er 7 eller færre.
8 eller flere sider
Vis “…” hvis der er 8 eller flere sider. “…” indsættes før den sidste side, og/eller efter første side hvis nødvendigt.
Markering
Vis altid hvilken side brugeren befinder sig på.
Vis første, forrige, næste og sidste side. Brugeren skal kunne navigere til disse sider uanset hvor de befinder sig.
Forrige og næste link
Benyt Forrige og Næste links hhv. før første side og efter sidste side.
Hvis brugeren står på første side vises “Forrige” ikke. Hvis brugeren står på sidste side vises “Næste” ikke.
Responsiv
Hold paginering på en enkelt linje.
På små skærme benyttes Forrige-, Næste-, Første- og Sidste-links. Den aktuelle side og det samlede sideantal vises i midten.
Varianter
7 eller færre sider
8 eller flere sider
Referencer
Installation
HTML Struktur
<nav class="pagination" aria-label="Pagineringseksempel med 12 sider" id="pagination-ID">
<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.