Pageination

Om komponenten

Pagination er en navigasjonskomponent som lar brukeren bla mellom sider i et paginert innholdssett. Den viser sidetall, forrige/neste-knapper og ellipsis-indikatorer som gir brukeren oversikt over hvor de er og hvor mange sider som finnes.

Egnet til:

• Paginering av søkeresultater, tabeller og lister
• Navigasjon der brukeren trenger direkte tilgang til spesifikke sider
• Innhold hvor SEO er viktig (i motsetning til uendelig scrolling)

Uegnet til:

• Navigasjon mellom steg i et skjema — bruk Stepper
• Karuseller og bildegallerier — bruk Carousel
• Innhold som egner seg for «last inn flere»-mønster

Relaterte komponenter: Stepper, Breadcrumbs

Varianter

URL-drevet (anbefalt)

Aktiv side leses fra URL-en — typisk en query-parameter eller hash. Pagination rendrer lenker som peker til andre sider, og når brukeren klikker, oppdaterer router-en URL-en og komponenten får ny aktiv side. Fordel: delbare lenker, fungerende fram/tilbake i nettleseren, og naturlig synkronisering med filter og sortering som også ligger i URL-en.

Lokal state

Aktiv side holdes i en lokal useState. onChange-callbacken brukes for å holde state synkronisert når brukeren klikker. getItemHref peker likevel til en URL (typisk hash) slik at høyreklikk → «Åpne i ny fane» fortsatt fungerer som forventet.

Retningslinjer

Plassering

Pagination plasseres under innholdet den paginerer, sentrert eller venstrejustert avhengig av kontekst. Hold tilstrekkelig avstand til innholdet over (minst 24px).

Ellipsis

Ellipsis (…) vises automatisk når det er for mange sider til å vise alle sidetall.

Formatering

Anatomi

Forrige-knapp Navigerer til forrige side.

Sidetall Viser sidenummeret. Aktiv side er visuelt uthevet med mørk blå bakgrunn.

Ellipsis Indikerer at det finnes sider mellom de synlige sidetallene. Ikke interaktiv.

Neste-knapp Navigerer til neste side.

Størrelse

Alle interaktive elementer har en klikkflate på minimum 44×44px. Dette sikrer god brukervennlighet på berøringsskjermer og oppfyller WCAG 2.5.8 Target Size.

Universell utforming

Sjekkliste

✓ Alle klikkflater er minst 44×44px

✓ Fokusring er synlig ved tastaturnavigasjon

✓ Komponenten er testet med skjermleser (VoiceOver/NVDA)

✓ Fargekontrastenfor tekst mot bakgrunn er minst 4.5:1

Les mer

• WCAG 2.5.8 Target Size (AAA)
• WCAG 1.3.1 Info and Relationships (A)
• WCAG 4.1.2 Name, Role, Value (A)

Interaksjon

Alle sidetall og forrige/neste-knapper er interaktive. Ellipsis er aldri interaktiv.

Tastatur