Innholdsfortegnelse (Table of Contents)

<adb-toc> viser en sammenklappbar innholdsfortegnelse med lenker til seksjoner på siden. Brukes typisk i sidepaneler eller øverst i lange artikler.

Eksempel

EksempelVarianterBrukAPITilgjengelighet

Varianter

Standard (fluid)

Fyller tilgjengelig bredde. Fontstørrelse tilpasser seg automatisk via container queries når plassen er begrenset.

Hva er Natur i Norge?KartleggingBruk av systemetKurs og opplæring

Narrow (kompakt)

Tvunget kompakt layout med mindre fontstørrelse. Bruk variant="narrow" for sidepaneler eller smale kolonner.

Hva er Natur i Norge?KartleggingBruk av systemetKurs og opplæring

Lukket (collapsed)

Standard tilstand — brukeren klikker for å utvide.

Hva er Natur i Norge?KartleggingBruk av systemet

Bruk

<adb-toc default-open>
  <adb-toc-item href="#intro" active>Introduksjon</adb-toc-item>
  <adb-toc-item href="#metode">Metode</adb-toc-item>
  <adb-toc-item href="#resultater">Resultater</adb-toc-item>
  <adb-toc-item href="#konklusjon">Konklusjon</adb-toc-item>
</adb-toc>

Importering

// Full bundle
import '@artsdatabanken/components';

// Individuell import (tree shaking)
import '@artsdatabanken/components/toc';
import '@artsdatabanken/components/toc-item';

Aktiv-markering

Aktiv-tilstanden styres manuelt av konsumenten. Sett active-attributtet på det gjeldende elementet:

// Eksempel: oppdater aktiv markering ved scroll
document.querySelectorAll('adb-toc-item').forEach(item => {
  item.active = item.href === currentSectionId;
});

API

<adb-toc>

Attributt	Type	Standard	Beskrivelse
open	boolean	false	Om innholdsfortegnelsen er utvidet
default-open	boolean	false	Om komponenten starter utvidet
variant	'default' | 'narrow'	'default'	Visuell variant — fluid eller kompakt

Event	Beskrivelse
toggle	Utløses når innholdsfortegnelsen åpnes eller lukkes

CSS Part	Beskrivelse
toggle	Veksleknappen
list	Innholdslisten (wrapper for items)

<adb-toc-item>

Attributt	Type	Standard	Beskrivelse
href	string	''	URL lenken peker til
active	boolean	false	Om dette elementet er aktivt (viser teal venstrekant)

CSS Part	Beskrivelse
link	Ankerelementet (<a>)

Tilgjengelighet (WCAG 2.1 AA)

• Komponenten bruker <nav> med aria-label="Innhold" for korrekt landmerke
• Veksleknappen har aria-expanded som oppdateres ved åpning/lukking
• Aktive elementer markeres med aria-current="true"
• Alle interaktive elementer er tilgjengelige via tastatur
• Fokusring med tilstrekkelig kontrast (4px solid, mørk farge)
• Fargekontrast mellom tekst og bakgrunn oppfyller AA-krav (4.5:1+)