Gå til sidens indhold
Det Fælles Designsystem

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

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.

Åbn dette eksempel i et nyt vindue: pagination
Eksempel på paginering

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

Åbn dette eksempel i et nyt vindue: pagination-short
Eksempel på paginering med 7 sider

8 eller flere sider

Åbn dette eksempel i et nyt vindue: pagination-long
Eksempel på paginering med 12 sider

Paginering af tabeller

Se på siden Tabeller, hvordan paginering anvendes i forbindelse med tabeller.

Referencer

USWDS om paginering

Installation

HTML Struktur

Kodeeksempel
<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">
            <span class="sr-only">Prikker som indikerer skjulte sider</span><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">
            <span class="sr-only">Prikker som indikerer skjulte sider</span><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.