Tabs

Release dato: 29.01.2024

Sist oppdatert: 27.04.2026

Tabs (faner) er en type navigasjon på en side som lar brukeren bytte mellom relatert innhold uten å forlate siden. Valgt fane påvirker innholdet i et avgrenset område under fanerekken. Tabs gjør det enkelt å navigere mellom ulike deler av samme kontekst.

Har du noen innspill til komponenten?Gi oss beskjed!

Test komponenten

Kodebygger

PktTabs

Utseende
Viser dekorative separatorer mellom faner med angitt Punkt-ikon.
Viser dekorative separatorer mellom faner med egendefinert ikonsti. Overstyrer separatorIconName hvis begge er satt.
Innstillinger
Liste med lenker eller funksjoner for hver tab (Gammel måte å sette opp tabs på, bruk heller PktTabItem inni PktTabs)

Innhold

0 (PktTabItem)

PktTabItem

Innhold
URL for taben. Hvis satt, rendres taben som en lenke.
Navnet på ikonet som skal vises
Tekst som vises i en tag på taben
Utseende
Utseendet til tag-en
Tilgjengelighet
Setter aria-controls attributtet på taben
Teknisk
Tabens indeks i listen. Brukes for navigasjon og callbacks. Må settes eksplisitt når tabs mappes.
1 (PktTabItem)

PktTabItem

Innhold
URL for taben. Hvis satt, rendres taben som en lenke.
Navnet på ikonet som skal vises
Tekst som vises i en tag på taben
Utseende
Utseendet til tag-en
Tilgjengelighet
Setter aria-controls attributtet på taben
Teknisk
Tabens indeks i listen. Brukes for navigasjon og callbacks. Må settes eksplisitt når tabs mappes.
2 (PktTabItem)

PktTabItem

Innhold
URL for taben. Hvis satt, rendres taben som en lenke.
Navnet på ikonet som skal vises
Tekst som vises i en tag på taben
Utseende
Utseendet til tag-en
Tilgjengelighet
Setter aria-controls attributtet på taben
Teknisk
Tabens indeks i listen. Brukes for navigasjon og callbacks. Må settes eksplisitt når tabs mappes.

Relaterte komponenter

Tag

Bruk tag for å formidle ekstra informasjon i fanen

Accordion

Når innhold kan vises/skjules seksjonsvis i samme side

Breadcrumbs

Når brukeren skal navigere mellom sider i et hierarki

Varianter

Du kan kombinere flere elementer i fanene:

VariantBeskrivelse
Kun tekstEnkelt felt for lengre tekst
Ikon og tekstIkon sammen med tekst
Tekst og tagTekst med en tag for ekstra informasjon
Ikon, tekst og tagKombinasjon av ikon, tekst og tag
Tekst og separatorikonTekst med separatorikon mellom fanene
Tabs med kun tekstTabs med ikon og tekstTabs med tekst og tagTabs med ikon, tekst og tagTabs med separatorikon

Retningslinjer for bruk

Bruk tabs når

  • innholdet hører til samme side, men bør deles opp i mindre seksjoner
  • du vil gjøre det enkelt å navigere uten å forlate konteksten

Unngå tabs når

  • innholdet ikke hører naturlig sammen
  • det blir så mange faner at de skaper støy eller forvirring
  • innholdet heller bør vises som en egen side eller seksjon

Skriv korte titler

Tittelen på en fane bør være kort, tydelig og beskrive panelet den åpner. Lange titler eller tekst som går over flere linjer gir dårlig lesbarhet.

Gjør slik

Bruk korte og presise titler i faner

Unngå

Unngå lange og uklare fanetitler

Antall faner

Gjør en vurdering av hvor mange faner løsningen trenger. For mange faner kan oppleves overveldende. På små skjermer vil overskytende faner få horisontal scroll.

Gjør slik

Bruk et begrenset antall faner for oversiktlighet

Unngå

Unngå for mange faner på samme nivå

Tags og ikoner

Unngå å bruke kun ikoner som titler på faner, og sørg for at eventuelle ikoner kommuniserer hvilken type innhold som er i fanen. Om fanene er steg i en prosess kan du bruke separatorikoner mellom fanene.

Varianter av tabs: med separatorikon

Dersom du bruker tags kan du selv velge hvilken farge du ønsker å ta i bruk basert på innholdet eller budskapet du ønsker å formidle. Les mer om god bruk av tags her.

Varianter av tabs: kun tekst

Gjør slik

Bruk ikoner og tags for å tydeliggjøre innhold

Unngå

Unngå faner med ikoner som ikke gir mening og uklare tags

Responsivitet

  • Tabs skal alltid ligge over innholdet de styrer
  • På små skjermer vil fanerekken kunne scrolle horisontalt
  • Test at titler, ikoner og tags skalerer godt på mobil og nettbrett
Tabs i mobilkontekst med horisontal scroll

Universell utforming

  • Én fane vil alltid være aktiv, slik at ett panel alltid er synlig
  • Første fane skal være aktiv ved første besøk på en side
  • Faner som brukes som inline navigasjon følger WAI-ARIA sine krav til tabs
  • Dersom fanene brukes som lenker, oppfører de seg som en vanlig lenkemeny
  • Tastaturnavigasjon må være støttet: bruk “pil høyre/venstre” for å navigere mellom faner og “enter” for å velge

Velg riktig semantikk (tabs vs navigasjon)

Tabs-komponenten kan brukes på to måter, avhengig av hva du bygger:

  • Ekte tabs (bytter panelinnhold på samme side): bruk standardoppsett med arrowNav=true (default). Da får du role="tablist" på listen og role="tab" + aria-selected på fanene.
  • Steg/prosess eller vanlig lenkenavigasjon: bruk disableArrowNav=true. Da blir listen rendret som role="navigation" uten tab-semantikk.

Separator mellom faner

  • separatorIconName viser dekorative separatorer med et Punkt-ikon.
  • separatorIconPath viser dekorative separatorer med egen ikonsti.
  • Hvis begge er satt, brukes separatorIconPath.
  • Separatorene er kun visuelle og endrer ikke tastaturlogikk eller semantikk alene.
Tabs (WAI-ARIA)

Beskriver hvordan du gjør tabs tilgjengelig

Anatomi

ElementBeskrivelse
1. Aktiv faneFane som er valgt og styrer synlig innhold
2. Sidetittel på faneTeksten som beskriver innholdet
3. Tag (valgfritt)Tilleggsinformasjon
4. Ikon (valgfritt)Støtter fanens innhold visuelt
5. Separatorikon (valgfritt)Visuelt skille mellom faner
6. Ikke aktiv faneAndre tilgjengelige valg
7. Aktiv linjeMarkering under aktiv fane
8. SkillelinjeSkiller faner fra innholdet under
Anatomi for tabs

Implementasjon i kode

Hvordan ta komponenten i bruk?

import @oslokommune/punkt-elements/dist/pkt-tabs.js;
import @oslokommune/punkt-elements/dist/pkt-tab-item.js;
import { PktTabs, PktTabItem } from '@oslokommune/punkt-react';
<script src="https://punkt-cdn.oslo.kommune.no/19/elements/pkt-tabs.js" type="module"></script>
<script src="https://punkt-cdn.oslo.kommune.no/19/elements/pkt-tab-item.js" type="module"></script>

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-tabs");

Egenskaper

PktTabs

Props

Prop:
tabs?
Type:
array
Beskrivelse:
Liste med lenker eller funksjoner for hver tab (Gammel måte å sette opp tabs på, bruk heller PktTabItem inni PktTabs)
Prop:
arrowNav?
arrow-nav?
Type:
boolean
Standardverdi:
true
Beskrivelse:
Aktiverer piltastnavigasjon mellom tabs. Skrur også på role='tablist'/'tab' og aria-selected.
Prop:
disableArrowNav?
disable-arrow-nav?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Deaktiverer piltastnavigasjon (f.eks. for ren navigasjonsmeny). Overstyrer arrowNav. Når denne er satt blir semantikken navigasjon i stedet for tabs.
Prop:
separatorIconName?
separator-icon-name?
Type:
icon
Beskrivelse:
Viser dekorative separatorer mellom faner med angitt Punkt-ikon.
Prop:
separatorIconPath?
separator-icon-path?
Type:
string
Beskrivelse:
Viser dekorative separatorer mellom faner med egendefinert ikonsti. Overstyrer separatorIconName hvis begge er satt.

Slots

Slot:
default
Beskrivelse:
PktTabItem-komponenter

Events

Event:
onTabSelected
Type:
—
Beskrivelse:
Returnerer indeksen til den klikkede taben (React)
Event:
tab-selected
Type:
—
Beskrivelse:
Returnerer indeksen til den klikkede taben

tabs (element)

Prop:
text
Type:
string
Beskrivelse:
Tittel for taben
Prop:
href?
Type:
string
Beskrivelse:
URL for taben
Prop:
action?
Type:
function
Beskrivelse:
Funksjon som skal kjøres ved klikk
Prop:
controls?
Type:
string
Beskrivelse:
Setter aria-controls attributt på taben
Prop:
tag?
Type:
object
Beskrivelse:
Prop:
icon?
Type:
icon
Beskrivelse:
Navnet på ikonet
Prop:
active?
Type:
boolean
Beskrivelse:
Er taben for øyeblikket den aktive taben?

PktTabItem

Props

Prop:
active?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Er dette den aktive taben?
Prop:
href?
Type:
string
Beskrivelse:
URL for taben. Hvis satt, rendres taben som en lenke.
Prop:
icon?
Type:
icon
Beskrivelse:
Navnet på ikonet som skal vises
Prop:
tag?
Type:
string
Beskrivelse:
Tekst som vises i en tag på taben
Prop:
tagSkin?
tag-skin?
Type:
"blue" | "green" | "red" | "beige" | "yellow" | "grey" | "gray" | "blue-light"
Standardverdi:
"blue"
Beskrivelse:
Utseendet til tag-en
Prop:
index?
Type:
number
Standardverdi:
0
Beskrivelse:
Tabens indeks i listen. Brukes for navigasjon og callbacks. Må settes eksplisitt når tabs mappes.
Prop:
controls?
Type:
string
Beskrivelse:
Setter aria-controls attributtet på taben

Slots

Slot:
default
Beskrivelse:
Teksten/innholdet i taben

Events

Event:
click
Type:
—
Beskrivelse:
Utløses når taben klikkes. Mottar event-objektet som parameter.