Kode

Paginering

Åbn dette eksempel i et nyt vindue

Eksempler og retningslinjer

Installation

HTML Struktur

<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.