Pagination

Pagination brukes for å dele inn større mengder innhold i flere sider og gjøre det enklere å navigere mellom dem. Komponenten brukes ofte i tabeller, søkeresultater, lister og andre visninger der alt innhold ikke vises samtidig.

Egnet til

• Innhold som er delt opp i flere sider
• Navigasjon mellom resultatsider i søk eller lister
• Tabeller og transaksjonsoversikter med mange rader
• Situasjoner der brukeren trenger oversikt over hvor hen befinner seg i et datasett

Uegnet til

• Innholdsmengder som kan vises på én side
• Situasjoner der uendelig scrolling (infinite scroll) gir bedre brukeropplevelse
• Innhold som lastes inn fortløpende uten tydelige sider
• Navigasjon mellom steg i en prosess — bruk en stegindikator

Bruk

Pagination krever page (nåværende side), count (totalt antall sider) og onPageChange (callback ved sidebytte). Alle tekststrenger må sendes inn for i18n-støtte.

Laster...

Laster...

Eksempler

Med tekst på knapper

Vis tekst på forrige/neste-knappene med prevNextTexts. Dette kan være nyttig på desktop hvor det er god plass.

Laster...

Laster...

Med ellipsis

Ved mange sider vises ellipsis (...) for å indikere at det finnes sider mellom de synlige sidetallene. Juster siblingCount og boundaryCount for å kontrollere hvor mange sider som vises.

Laster...

Retningslinjer

Vis paginering bare når det finnes flere sider

Én side med innhold trenger ingen navigasjon. Komponenten tar seg av det selv og rendrer null når count er 1 eller lavere, så du kan sende inn tallet uten å sjekke det først.

Plasser pagineringen ved innholdet den styrer

Rett under tabellen eller listen, uten annet innhold imellom. Er tabellen så lang at pagineringen forsvinner ut av skjermen, gjenta den over også, så brukeren finner den både før og etter lesingen.

Behold aktiv side som markør, ikke som knapp

Aktiv side er markert med bakgrunnsfarge og aria-current="page", og er ikke trykkbar. Å kunne trykke seg til siden du står på gir ingenting, og for en skjermleserbruker blir det en knapp som ikke gjør noe.

Styr hvor mange sidetall som vises

Ved mange sider viser komponenten første og siste side, sidene rundt den aktive, og ellipsis der noe er utelatt. boundaryCount bestemmer hvor mange sidetall som beholdes i hver ende, siblingCount hvor mange som vises på hver side av den aktive.

Universell utforming

Hva du selv må sørge for

• Gi meningsfylte labels på brukerens språk. Alle tekststrenger (ariaLabel, previousLabel, nextLabel, pageLabel) må sendes inn og oversettes.
• Oppdater innholdet ved sidebytte. Komponenten håndterer kun navigasjonen; du må koble onPageChange til faktisk innholdsoppdatering.
• Ikke flytt fokus uventet. Ved sidebytte bør fokus forbli i pagination eller flyttes til toppen av det nye innholdet, ikke forsvinne.

Hva komponenten gjør automatisk

• Semantisk navigasjon: bruker <nav> med aria-label slik at hjelpemidler forstår komponentens rolle.
• Aktiv side annonseres: aria-current="page" på aktiv sideknapp formidler hvilken side som er valgt.
• Tastaturnavigasjon: alle knapper er native <button> og kan nås med Tab, aktiveres med Enter/Space.
• Deaktiverte knapper: forrige-knapp på første side og neste-knapp på siste side er disabled.
• Ellipsis er ikke interaktiv. Skjules fra skjermlesere med aria-hidden="true".
• Touch-mål: alle knapper har minimum 36×36 px klikkflate.
• Fokusindikator: tydelig fokusring via :focus-visible.

Tastaturnavigasjon

Tast	Handling
Tab	Flytter fokus til neste knapp i pagination
Shift+Tab	Flytter fokus til forrige knapp
Enter	Aktiverer knappen (navigerer til valgt side)
Space	Aktiverer knappen (navigerer til valgt side)

Skjermleser

• Ved fokus på nav: "Sidenavigering, navigasjon"
• Ved fokus på sideknapp: "Side 3, knapp"
• Ved fokus på aktiv side: "Side 2, nåværende side, knapp"
• Ved fokus på forrige (deaktivert): "Forrige, knapp, deaktivert"
• Ved fokus på neste: "Neste, knapp"
• Ellipsis annonseres ikke (aria-hidden)

WCAG-kriterier

Sist gjennomgått: 2026-08-20 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier7 ditt ansvar · 15 håndtert · 40 ikke relevant · 0 ikke på plass

Ditt ansvar (7)

Kriterium	Nivå	Hva du må gjøre
4.1.2 Navn, rolle, verdi	A	Gi meningsfylte labels på brukerens språk. Alle tekststrenger (ariaLabel, previousLabel, nextLabel, pageLabel) må sendes inn av konsumenten og oversettes til riktig språk. Komponenten har ingen hardkodede fallback-tekster.
3.1.1 Språk på siden	A	Gi meningsfylte labels på brukerens språk. Alle tekststrenger (ariaLabel, previousLabel, nextLabel, pageLabel) må sendes inn av konsumenten og oversettes til riktig språk. Komponenten har ingen hardkodede fallback-tekster.
3.2.2 Ved inndata	A	Oppdater innholdet ved sidebytte. Pagination håndterer kun navigasjonslogikken. Konsumenten må koble onPageChange til faktisk innholdsoppdatering og sørge for at nytt innhold lastes og vises.
2.4.3 Fokusrekkefølge	A	Ikke flytt fokus uventet ved sidebytte. Ved sidebytte bør fokus forbli i pagination-området eller flyttes til toppen av det nye innholdet. Ikke la fokus forsvinne eller hoppe til et uventet sted.
3.2.1 Ved fokus	A	Ikke flytt fokus uventet ved sidebytte. Ved sidebytte bør fokus forbli i pagination-området eller flyttes til toppen av det nye innholdet. Ikke la fokus forsvinne eller hoppe til et uventet sted.
1.3.1 Informasjon og relasjoner	A	Bruk pagination kun for sideinndelt innhold. Ikke bruk pagination for sekvensielle steg i en prosess (bruk stegindikator) eller for navigasjon mellom ulike sider (bruk lenker eller meny).
2.4.4 Formål med lenke (i kontekst)	A	Bruk pagination kun for sideinndelt innhold. Ikke bruk pagination for sekvensielle steg i en prosess (bruk stegindikator) eller for navigasjon mellom ulike sider (bruk lenker eller meny).

Håndtert av komponenten (15)

Kriterium	Nivå	Hva komponenten gjør
1.3.1 Informasjon og relasjoner	A	Bruker semantisk <nav>-element. Aktiv side markeres med aria-current="page". Liste-struktur med <ul>/<li> gir kontekst.
1.3.2 Meningsfull rekkefølge	A	Sidetall følger naturlig rekkefølge fra lav til høy. Forrige/neste-knapper plassert logisk på hver side.
1.4.1 Bruk av farge	A	Aktiv side kommuniseres via aria-current, ikke kun farge. Deaktiverte knapper bruker disabled-attributt.
1.4.3 Kontrast (minimum)	AA	Tekst- og ikonfarge bruker tokens med tilstrekkelig kontrast. Disabled-tilstand (opacity) er unntatt per WCAG.
1.4.4 Endre tekststørrelse	AA	Relative enheter — skalerer korrekt ved 200 % zoom.
1.4.10 Omflyt	AA	Fleksibel layout uten fast bredde. Fungerer ned til 320 px viewport.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Fokusindikator oppfyller 3:1 kontrastkrav mot bakgrunn.
2.1.1 Tastatur	A	Alle knapper er native <button> og aktiveres med Enter og Space. Fullt opererbart med tastatur.
2.1.2 Ingen tastaturfelle	A	Fokus kan navigeres ut med Tab og Shift+Tab. Ingen tastaturfelle.
2.4.3 Fokusrekkefølge	A	Følger naturlig tab-rekkefølge i DOM.
2.4.4 Formål med lenke (i kontekst)	A	Alle sideknapper har beskrivende aria-label (f.eks. "Side 3"). Forrige/neste har egne labels.
2.4.7 Synlig fokus	AA	Tydelig fokusindikator via :focus-visible med outline-token.
2.5.8 Målstørrelse (minimum)	AA	Alle knapper har minimum 36×36 px klikkflate for touch.
3.2.1 Ved fokus	A	Fokus på en knapp trigger ingen kontekstendring.
4.1.2 Navn, rolle, verdi	A	Native <button> med implisitt rolle. nav-element har aria-label. Aktiv side har aria-current="page".

Ikke relevant (40)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A	Ikoner er dekorative og skjules med aria-hidden. Knappetekst gir tilgjengelig navn.
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.4 Teksting (direkte)	AA	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	AA	Ingen medieelementer.
1.3.3 Sensoriske egenskaper	A	Komponenten formidler ikke instruksjoner.
1.3.4 Visningsretning	AA	Ingen fast orientering — tilpasser seg visningsretning.
1.3.5 Identifiser formål med inndata	AA	Ikke et skjemafelt.
1.4.2 Styring av lyd	A	Ingen lydelementer.
1.4.5 Bilder av tekst	AA	Ingen bilder av tekst.
1.4.12 Tekstavstand	AA
1.4.13 Innhold ved hover eller fokus	AA
2.1.4 Tastatursnarveier	A	Ingen egendefinerte tastatursnarveier.
2.2.1 Justerbar hastighet	A	Ingen tidsbegrensede funksjoner.
2.2.2 Pause, stopp, skjul	A	Ingen animasjon eller automatisk oppdatering.
2.3.1 Terskelverdi på tre glimt	A	Ingen blinkende eller glimtende innhold.
2.4.1 Hoppe over blokker	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.2 Sidetitler	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.5 Flere måter	AA	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.6 Overskrifter og ledetekster	AA
2.4.11 Fokus ikke skjult (minimum)	AA	Ingen sticky/overlappende elementer som kan skjule fokus.
2.5.1 Pekerbevegelser	A	Ingen drag-and-drop eller sveipebevegelser.
2.5.2 Avbryt peker	A	Native button-element — nettleseren håndterer pekerinteraksjon.
2.5.4 Bevegelsesaktivering	A	Ingen bevegelsesbasert interaksjon.
2.5.6 Samtidige inndatamekanismer	A
2.5.7 Drabevegelser	A	Ingen drag-and-drop.
3.1.1 Språk på siden	A	Sidekrav — gjelder ikke enkeltkomponenter.
3.1.2 Språk på deler av innhold	AA	Komponenten setter ikke lang-attributt — innhold er på sidespråket.
3.2.2 Ved inndata	A	Sidebytte skjer ved eksplisitt klikk, ikke ved fokusendring.
3.2.3 Konsistent navigasjon	AA	Sidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjon	AA	Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelp	A	Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.1 Identifikasjon av feil	A
3.3.2 Ledetekster eller instruksjoner	A
3.3.3 Forslag ved feil	AA
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter.
3.3.7 Redundant oppføring	A	Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess.
3.3.8 Tilgjengelig autentisering (minimum)	AA	Ikke en autentiseringskomponent.
4.1.3 Statusmeldinger	AA	Komponenten genererer ingen statusmeldinger.

Props / API

Prop	Type	Default	Beskrivelse
page	number	—	Nåværende side (1-indeksert)
count	number	—	Totalt antall sider
onPageChange	(page: number) => void	—	Callback når bruker bytter side
siblingCount	number	1	Antall synlige sider rundt aktiv side
boundaryCount	number	1	Antall synlige sider i start og slutt
prevNextTexts	boolean	false	Vis tekst på forrige/neste-knapper
previousLabel	string	—	Tilgjengelig navn på forrige-knapp
nextLabel	string	—	Tilgjengelig navn på neste-knapp
ariaLabel	string	—	Tilgjengelig navn på nav-elementet
pageLabel	(page: number) => string	—	Funksjon som genererer aria-label for sidetall

Tilpasning med CSS

Tilgjengelige klasser og selektorer

Element/tilstand	Selektor / attributt
Rot	.ix-pagination på <nav>
Liste	.ix-pagination__list på <ul>
Sideknapp	.ix-pagination__button på <button>
Forrige-knapp	.ix-pagination__button[data-type="prev"]
Neste-knapp	.ix-pagination__button[data-type="next"]
Med tekst på prev/next	[data-show-text] på knappen
Aktiv side	[aria-current="page"] på knappen
Deaktivert	:disabled på knappen
Ellipsis	.ix-pagination__ellipsis på <span>

Eksempel: ren HTML

<nav class="ix-pagination" aria-label="Sidenavigering">
  <ul class="ix-pagination__list">
    <li>
      <button type="button" class="ix-pagination__button" data-type="prev" disabled aria-label="Forrige side">
        <ix-icon name="chevron_left" aria-hidden="true"></ix-icon>
      </button>
    </li>
    <li>
      <button type="button" class="ix-pagination__button" aria-current="page" aria-label="Side 1">1</button>
    </li>
    <li>
      <button type="button" class="ix-pagination__button" aria-label="Side 2">2</button>
    </li>
    <li>
      <button type="button" class="ix-pagination__button" data-type="next" aria-label="Neste side">
        <ix-icon name="chevron_right" aria-hidden="true"></ix-icon>
      </button>
    </li>
  </ul>
</nav>