Header

Release dato: 25.08.2023

Sist oppdatert: 20.01.2026

Header viser avsender og hjelper brukeren å navigere i en løsning eller på et nettsted. Den gir gjenkjennelighet og forutsigbarhet, og hjelper brukeren å forstå hvor hen er, og hva som er mulig å gjøre videre. Headeren skal være lik på alle sider i samme kontekst.

Vi skiller mellom global header og service header, som dekker ulike brukerbehov og brukes i forskjellige type løsninger.

Forhåndsvisningen er dessverre for smal til å vise desktop-versjonen av header. Vi anbefaler at du åpner forhåndsvisningen i fullskjerm for å teste for stor skjerm.

Relaterte komponenter

Varianter

Type	Bruk
Global header	Brukes på åpne sider som henger tett sammen med oslo.kommune.no, inneholder global navigasjon og globalt søk
Service header	Brukes i innloggede løsninger og interne verktøy. Viser logo, avsender, navigasjonslenker og/eller brukermeny

Begge variantene finnes i samme komponent. Du velger variant med type-propen: type="service" (standard) eller type="global". De fleste egenskapene er felles, mens noen er spesifikke for hver variant – se Felles og variantspesifikke egenskaper.

Valg av header er et overordnet valg og skal tas tidlig i designprosessen. Valget påvirker navigasjon, søk, innlogging og hvordan brukeren forstår konteksten løsningen inngår i.

Retningslinjer for bruk

løsningen er en del av et åpne nettsider
innholdet er publisert og tilgjengelig uten innlogging
brukeren forventer global navigasjon og globalt søk
løsningen er del av eller tett integrert med oslo.kommune.no

Global header brukes når løsningen først og fremst skal fungere som et nettsted, ikke som en avgrenset tjeneste.

Bruk service header når

løsningen er et internt verktøy eller en innlogget tjeneste
brukeren skal kunne se hvem hen er innlogget som
løsningen har lokal navigasjon eller avgrenset funksjonalitet
tjenesten ikke er en del av oslo.kommune.no

Unngå å blande global og service header

ikke kombiner global navigasjon med lokal tjenestenavigasjon
ikke bruk globalt søk i innloggede tjenester

Headeren skal være enkel å forstå

Headeren skal hjelpe brukeren å orientere seg raskt og forstå strukturen i løsningen.

Enkel betyr ikke få elementer, men at hvert element har en tydelig rolle og er plassert der brukeren forventer å finne det.

Header består av tre seksjoner:

logo og avsender
navigasjonslenker og handlinger
brukermeny eller logg ut

Logo og avsender står alltid til venstre. Navigasjon og innloggingselementer står til høyre. Du skal aldri endre plassering eller størrelse på logoen.

Du står fritt til å velge hvilke elementer du vil bruke, men unngå å bruke alle. For mye innhold gjør navigasjonen uklar. Test navigasjonen på målgruppen før du lander strukturen.

Forklaring av posisjoner og dimensjoner tilgjengelig til hver element i headeren

Avsender og utlogging

Logger du inn så må du ha mulighet for å logge ut, dette gjelder i både global og custom header. Når brukeren har logget inn må du enten ha brukermenyen tilgjengelig, eller logg ut-knapp.

Hvis brukeren ikke er innlogget, skal logoen som regel lenke til oslo.kommune.no
Noen interne systemer kan peke direkte til en intern startside i stedet for kommunens hovednettsted, men vi anbefaler at du brukertester
Hvis brukeren er innlogget, kan logoen være statisk, og i stedet vises en avsenderlenke (for eksempel “Bymiljøetaten” eller navnet på løsningen) som leder til startsiden

Bruk riktig søkefelt

Valg av søkefelt signaliserer hva brukeren søker i. Globalt søk og lokalt søk skal derfor aldri oppleves som samme funksjon.

Global header bruker Search input i Global styling. Service header skal bruke Search input med Local styling. Dette skiller tydelig mellom søk i en innlogget tjeneste eller løsning og søket på oslo.kommune.no.

Responsivitet

Header tilpasser seg skjermbredden, men fordi innholdet varierer mellom tjenester, må du selv teste hvor breakpoints skal slå inn.

Ved liten skjermbredde skal:

navigasjonen samles i hamburgermeny
brukermenyen løsne fra headeren og vises under i en egen seksjon

Vi anbefaler at du tester på:

mobil i portrett og landskap
nettbrett
zoom på 200%

Universell utforming

Headeren skal fungere med tastatur

Alle interaktive elementer skal kunne brukes med tastatur alene. Sørg for at “Tab”, “Enter” og “Esc” fungerer som forventet i navigasjon og brukermeny.

Bruk riktige landemerker og ARIA-roller

bruk <header> eller role="banner"
bruk role="navigation" og aria-label hvis det finnes flere navigasjoner på siden
bruk aria-expanded og aria-controls på nedtrekksmenyen

Gjør innholdet forståelig for skjermlesere

Bruk beskrivende tekster på alle knapper og lenker. Unngå generiske formuleringer som “klikk her”. Brukeren skal kunne forstå struktur og formål uten visuell kontekst.

Test på små skjermer og høy zoom

Headeren skal fungere uansett navigasjonsmetode, skjermstørrelse eller zoom-nivå.

Element	Beskrivelse
1. Bakgrunn	Hvit bakgrunn i hele headeren
2. Oslo-logo	Plassert til venstre, lenker til forsiden
3. Avsender (valgfritt)	Navn på tjeneste ved siden av logoen
4. Meny (valgfritt)	Meny for navigasjon
5. Innlogget meny (valgfritt)	Meny for innloggede brukere
6. Logg ut-knapp (valgfritt)	Knapp for utlogging

Anatomi service header

Element	Beskrivelse
1. Bakgrunn	Hvit bakgrunn i hele headeren
2. Oslo-logo	Plassert til venstre, lenker til forsiden
3. Avsender (valgfritt)	Navn på tjeneste ved siden av logoen
4. Meny (valgfritt)	Meny for navigasjon
5. Brukermeny (valgfritt)	Meny for innloggede brukere
6. Logg ut-knapp (valgfritt)	Knapp for utlogging

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements og React: 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-header");

Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.

Velg variant med `type`

Header har to varianter som velges med type-propen. Standard er service.

{/* Service header (standard) */}
<PktHeader type="service" serviceName="Min tjeneste" />

{/* Global header */}
<PktHeader type="global" />

<!-- Service header (standard) -->
<pkt-header type="service" service-name="Min tjeneste"></pkt-header>

<!-- Global header -->
<pkt-header type="global"></pkt-header>

Felles og variantspesifikke egenskaper

De fleste egenskapene er felles for begge variantene. Noen gjelder bare én variant, og disse skjules automatisk i egenskapstabellen når du bytter type.

Gjelder for	Egenskaper
Felles	`type`, `logoLink`, `logoPath`, `logoClick`, `position`, `scrollBehavior`, `user`, `userMenu`, `representing`, `canChangeRepresentation`, `logOutButtonPlacement`, `showSearch`, `searchPlaceholder`, `mobileBreakpoint`, `tabletBreakpoint`
Kun service header	`serviceName`, `serviceLink`, `serviceClick`, `hideLogo`, `compact`, `searchValue`, `openedMenu`, `slotMenuVariant`, `slotMenuText`
Kun global header	`dataUrl`, `data`, `locale`, `showContact`

Global header henter meny, globalt søk og kontaktlenke fra header/footer-tjenesten til oslo.kommune.no. Du trenger normalt ikke sette noe – dataUrl peker som standard på den publiserte tjenesten. Du kan overstyre med en egen dataUrl, eller sende inn ferdig hentet data via data. locale styrer språkvarianten (nb-NO som standard), og showContact skjuler kontaktlenken.

<PktHeader
  type="global"
  locale="nb-NO"
  onDataLoaded={(data) => console.info('meny lastet', data)}
  onDataError={(error) => console.error('kunne ikke laste meny', error)}
/>

<pkt-header type="global" locale="nb-NO"></pkt-header>
<script>
  const header = document.querySelector('pkt-header')
  header.addEventListener('data-loaded', (e) => console.info('meny lastet', e.detail.data))
  header.addEventListener('data-error', (e) => console.error('kunne ikke laste meny', e.detail.error))
</script>

Hvis innlastingen feiler vises en tydelig feilmelding («Kunne ikke laste meny.») når brukeren åpner menyen, og onDataError/data-error sendes. Vi bruker bevisst ikke en innebygd reservemeny, slik at headeren aldri viser utdatert navigasjon.

Det globale søket bruker Search input med global styling, og sender en GET til søke-endepunktet fra API-et med søkeordet i q-parameteren.

Content Security Policy / CSP

For å bruke global header i din applikasjon må du tillate https://cdn.web.oslo.kommune.no (eller https://*.oslo.kommune.no) i din Content Security Policy. Spesifikt må connect-src tillates, og dette kommer av at global header henter menydata fra Oslo kommunes CDN:

connect-src 'self' https://punkt-cdn.oslo.kommune.no/ https://cdn.web.oslo.kommune.no/;

Setter du en egen dataUrl, er det den URL-en som må tillates i stedet. Alternativt kan du hente payloaden på serversiden og sende den inn via data-propen – da trenger ikke nettleseren tilgang til endepunktet i det hele tatt. Den globale footeren bruker samme endepunkt, så denne tillatelsen dekker begge.

Søkefeltet sender en vanlig GET-form til søke-endepunktet fra API-et. Bruker du form-action-direktivet, må søkemålet også tillates:

form-action 'self' https://www.oslo.kommune.no/;

Se ellers den generelle CSP-veiledningen for oppsettet Punkt-komponentene trenger (blant annet ikoner og fonter fra punkt-cdn.oslo.kommune.no).

Spør oss gjerne om du trenger hjelp til å sette opp CSP!

Tastaturnavigasjon i megamenyen

Megamenyen i global header åpnes fra menyknappen og vises som et overlegg. Tastaturhåndteringen er bygd slik at fokusrekkefølgen oppleves naturlig:

«Tab» fra menyknappen flytter fokus inn i menyen.
«Tab» ut av menyen (forbi første eller siste element) lukker menyen og flytter fokus tilbake til menyknappen.
«Esc» lukker menyen og gir fokus tilbake til menyknappen.

Menyen lukkes ved intensjonelle klikk

På mobil og nettbrett vises innholdet du legger i headeren (slot/children) som en nedtrekksmeny. Når brukeren gjør et intensjonelt klikk inne i denne menyen, lukkes menyen automatisk. Med intensjonelt klikk menes navigasjons- og handlingselementer, altså lenker og knapper:

<a href>-lenker
<button>-knapper
elementer med role="link", role="button", role="menuitem", role="menuitemradio" eller role="menuitemcheckbox"

Menyen forblir åpen ved klikk på skjemafelter (for eksempel <input>, <select>, <textarea>) og på ikke-interaktivt innhold (tekst, ikoner og lignende). Deaktiverte elementer (disabled eller aria-disabled="true") lukker heller ikke menyen.

Dette gjelder både i React (<PktHeader type="service">) og web components (<pkt-header type="service">), og fungerer også for klient-side-ruting der siden ikke lastes på nytt.

Behold menyen åpen ved klikk

Har du et element som ikke skal lukke menyen – for eksempel en knapp som åpner et undernivå (accordion) inne i menyen – legger du til attributtet data-pkt-header-keep-open på elementet (eller på et element rundt det):

<PktHeader type="service" serviceName="Min tjeneste">
  {/* Lukker menyen ved klikk */}
  <a href="/innstillinger">Innstillinger</a>

  {/* Lar menyen være åpen ved klikk */}
  <button type="button" data-pkt-header-keep-open>
    Vis flere valg
  </button>
</PktHeader>

<pkt-header type="service" service-name="Min tjeneste">
  <!-- Lukker menyen ved klikk -->
  <a href="/innstillinger">Innstillinger</a>

  <!-- Lar menyen være åpen ved klikk -->
  <button type="button" data-pkt-header-keep-open>Vis flere valg</button>
</pkt-header>

Logoen er alltid en lenke

Logoen lenker alltid til hovednettstedet. Som standard peker den til https://oslo.kommune.no; du kan overstyre målet med logoLink.

Trenger du å kjøre en funksjon i stedet – for eksempel klient-side ruting – lar du logoen forbli en lenke og avbryter navigasjonen med preventDefault:

<PktHeader
  type="service"
  serviceName="Min tjeneste"
  logoClick={(event) => {
    event.preventDefault()
    router.navigate('/')
  }}
/>

<pkt-header type="service" service-name="Min tjeneste"></pkt-header>
<script>
  document.querySelector('pkt-header').addEventListener('logo-click', (event) => {
    event.detail.originalEvent.preventDefault()
    router.navigate('/')
  })
</script>

Om du kun bruker CSS

Dersom denne brukes med bare CSS må du selv sørge for funksjonalitet for å åpne brukermeny og sette aria-verdier som opprettholder god UU.

Endringer fra versjon 13 til versjon 14

Versjon 14 av PktHeader introduserer flere nye funksjoner og forbedringer, samt noen breaking changes. Hovedfokus er bedre fleksibilitet og mer eksplisitte API-er.

Nye funksjoner

Prop/Event	Beskrivelse
`showSearch`	Vis/skjul søkefelt i headeren
`searchPlaceholder`	Tilpass placeholder-tekst i søkefeltet
`searchValue`	Kontrollert verdi for søkefeltet
`onSearch`	Event som trigges når bruker trykker Enter i søkefeltet
`onSearchChange`	Event som trigges når søketekst endres
`logoClick`	Callback/event for logoklikk – avbryt navigasjonen med `preventDefault` (f.eks. klient-side ruting)
`serviceLink`	Gjør tjenestenavnet til en klikkbar lenke
`serviceClick`	Callback/event for å gjøre tjenestenavnet til en knapp
`hideLogo`	Mulighet til å skjule Oslo-logoen helt
`compact`	Kompakt header-høyde
`mobileBreakpoint`	Egendefinert breakpoint i piksler for grid-layout (1-rad vs 2-rader). Standard: 768
`tabletBreakpoint`	Egendefinert breakpoint i piksler for interaksjonsmønster (dropdown vs inline). Standard: 1280 (service) / 1024 (global)
`openedMenu`	Kontroller hvilken meny som er åpen ved oppstart
`logOutButtonPlacement`	Fleksibel plassering av logg ut-knapp: `userMenu`, `header`, `both`, `none`

Breaking changes

Fjernede props

Gammel prop	Erstatning
`fixed`	`position` med verdier `fixed`, `sticky` eller `relative`
`scrollToHide`	`scrollBehavior` med verdier `hide` eller `none`
`showLogOutButton`	`logOutButtonPlacement` med verdier `userMenu`, `header`, `both`, `none`
`showMenuButton`	Fjernet uten erstatning, kommer muligens tilbake i global headervariant

Deprecated props

Prop	Erstatning
`userMenuFooter`	Denne brukes ikke lenger. Legg inn i `userMenu` i stedet
`userOptions`	Denne brukes ikke lenger. Legg inn i `userMenu` i stedet
`user.shortname`	Deprecated
`representing.shortname`	Deprecated

Andre breaking changes

Type endring	Beskrivelse
Fjernet event	`logIn` event er fjernet
Required endring	`user.name` er nå påkrevd hvis `user`-objektet sendes inn
Required endring	`representing.name` er nå påkrevd hvis `representing`-objektet sendes inn
Standardverdi	`logoLink` har standardverdi `https://oslo.kommune.no` – logoen lenker alltid til hovednettstedet med mindre den overstyres (`logoLink`, `logoClick` eller `hideLogo`)
Standardverdi	`logOutButtonPlacement` har standardverdi `none` (tidligere viste `showLogOutButton` default `true`)
Type-endring	`user.lastLoggedIn` støtter nå både `string` og `Date`
Type-endring	`userMenu[].target` støtter nå både `string` og `function`
Type-endring	`representing.orgNumber` støtter nå både `string` og `number`

Egenskaper

Props

Prop:: type?

type?
Type:: "service" | "global"
Standardverdi:: "service"
Beskrivelse:: Hvilken header-variant som vises. 'service' er en tilpassbar header for én tjeneste (standard). 'global' er den kommuneovergripende headeren som henter innhold fra Oslo kommunes felles header/footer-endepunkt.
Prop:: dataUrl?

data-url?
Type:: string
Standardverdi:: "https://cdn.web.oslo.kommune.no/header-footer/header-footer.json"
Beskrivelse:: URL den globale headeren henter innhold fra (meny, søk og kontaktlenke). Standard er Oslo kommunes felles header/footer-endepunkt.
Prop:: data?

data?
Type:: object
Beskrivelse:: Hele API-responsen fra header/footer-endepunktet. Settes hvis du allerede har dataene (f.eks. når flere komponenter deler én fetch). Når denne er satt, skipper komponenten (og menyen) nettverkskallet.
Prop:: locale?

locale?
Type:: string
Standardverdi:: "nb-NO"
Beskrivelse:: Hvilken språknøkkel som skal velges fra payloaden. Faller tilbake til nb-NO hvis valgt språk mangler.
Prop:: showContact?

show-contact?
Type:: boolean
Standardverdi:: true
Beskrivelse:: Skal kontaktlenken (fra payloadens header.contact) vises? Lenken styles som en sekundærknapp.
Prop:: hideLogo?

hide-logo?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Skal Oslo-logoen skjules?
Prop:: logoLink?

logo-link?
Type:: string
Standardverdi:: "https://www.oslo.kommune.no"
Beskrivelse:: URL-en logoen lenker til. Logoen er alltid en lenke til hovednettstedet som standard; overstyr med en egen URL. For å kjøre en funksjon i stedet (f.eks. klient-side ruting), bruk logoClick (React) eller logo-click-eventet (custom element) og avbryt navigasjonen med preventDefault.
Prop:: logoPath?

logo-path?
Type:: string
Standardverdi:: "https://punkt-cdn.oslo.kommune.no/latest/logos/"
Beskrivelse:: Overstyr stien til logoen som skal vises. Kan også settes globalt med window.pktLogoPath.
Prop:: logoClick?
Type:: function
Beskrivelse:: Callback som kjøres når logoen klikkes (kun React). Logoen er alltid en lenke – kall event.preventDefault() i callbacken for å avbryte navigasjonen (f.eks. klient-side ruting). For custom element: lytt på logo-click-eventet og kall event.detail.originalEvent.preventDefault().
Prop:: serviceName?

service-name?
Type:: string
Beskrivelse:: Navnet på tjenesten som vises i headeren
Prop:: serviceLink?

service-link?
Type:: string
Beskrivelse:: URL-lenke for tjenestenavnet. Hvis du vil ha en knapp i stedet, bruk serviceClick-prop (React) eller legg til en tom logo-link og lytt til service-click event (custom element).
Prop:: serviceClick?
Type:: function
Beskrivelse:: Callback-funksjon som kalles når brukeren klikker på tjenestenavnet (kun React). For custom element, bruk service-click event.
Prop:: compact?

compact?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Bruk kompakt header-høyde
Prop:: position?

position?
Type:: "fixed" | "sticky" | "relative"
Standardverdi:: "fixed"
Beskrivelse:: Headerens posisjonering. 'fixed' fester headeren til toppen av viewporten, 'sticky' lar den følge dokumentflyten men klistre seg til toppen ved scrolling, 'relative' lar den følge dokumentflyten.
Prop:: scrollBehavior?

scroll-behavior?
Type:: "hide" | "none"
Standardverdi:: "hide"
Beskrivelse:: Headerens oppførsel ved skrolling. 'hide' skjuler headeren når brukeren skroller ned, 'none' holder headeren alltid synlig.
Prop:: user?

user?
Type:: object
Beskrivelse:: Brukerobjektet som inneholder informasjon om den innloggede brukeren (object med name og lastLoggedIn (streng eller datoobject))
Prop:: userMenu?

user-menu?
Type:: array
Beskrivelse:: Menyen som vises når brukeren klikker på brukerknapp (array av objekter med iconName, title og target)
Prop:: representing?

representing?
Type:: object
Beskrivelse:: Objekt som inneholder informasjon om representasjon, hvis aktuelt (object med name og orgNumber)
Prop:: canChangeRepresentation?

can-change-representation?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Skal brukeren kunne endre representasjon? Viser 'Endre organisasjon'-knapp
Prop:: logOutButtonPlacement?

log-out-button-placement?
Type:: "userMenu" | "header" | "both" | "none"
Standardverdi:: "none"
Beskrivelse:: Hvor skal logg ut-knappen vises?
Prop:: showSearch?

show-search?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Skal søkefeltet vises i headeren?
Prop:: searchPlaceholder?

search-placeholder?
Type:: string
Standardverdi:: "Søk"
Beskrivelse:: Placeholder-tekst i søkefeltet
Prop:: searchValue?

search-value?
Type:: string
Beskrivelse:: Kontrollert verdi for søkefeltet
Prop:: mobileBreakpoint?

mobile-breakpoint?
Type:: number
Standardverdi:: 768
Beskrivelse:: Egendefinert breakpoint for mobil-utseende i piksler. Standard: 768 for begge variantene.
Prop:: tabletBreakpoint?

tablet-breakpoint?
Type:: number
Standardverdi:: 1280
Beskrivelse:: Egendefinert breakpoint for tablet-utseende i piksler. Standard: 1280 for service header og 1024 for global header.
Prop:: openedMenu?

opened-menu?
Type:: "none" | "slot" | "search" | "user"
Standardverdi:: "none"
Beskrivelse:: Hvilken meny som skal være åpen ved oppstart
Prop:: slotMenuVariant?

slot-menu-variant?
Type:: "icon-only" | "icon-right"
Standardverdi:: "icon-only"
Beskrivelse:: Variant for menyknappen i tablet/mobil-modus
Prop:: slotMenuText?

slot-menu-text?
Type:: string
Standardverdi:: "Meny"
Beskrivelse:: Tekst som vises på menyknappen i tablet/mobil-modus

Slots

Slot:: default
Beskrivelse:: Lenker og knapper som vises i headeren. Brukes kun for service-headeren, ikke global header.

Events

Event:: changeRepresentation

change-representation
Type:: —
Beskrivelse:: Bruker endrer representasjon
Event:: logOut

log-out
Type:: —
Beskrivelse:: Bruker klikker på logg ut-knappen
Event:: onSearch

search
Type:: —
Beskrivelse:: Bruker søker (trykker Enter i søkefeltet)
Event:: onSearchChange

search-change
Type:: —
Beskrivelse:: Bruker endrer søketeksten
Event:: logoClick

logo-click
Type:: —
Beskrivelse:: Bruker klikker på logoen (custom element). detail.originalEvent gir klikk-eventet – kall preventDefault() på det for å avbryte navigasjonen. I React brukes logoClick som prop.
Event:: serviceClick

service-click
Type:: —
Beskrivelse:: Bruker klikker på tjenestenavnet (custom element). I React brukes serviceClick som prop.
Event:: dataLoaded

data-loaded
Type:: —
Beskrivelse:: Global header: sendt når header/footer-payloaden er hentet og parset. detail.data inneholder hele API-responsen slik at f.eks. en footer kan dele samme fetch.
Event:: dataError

data-error
Type:: —
Beskrivelse:: Global header: sendt hvis henting eller parsing av payloaden feiler. detail.error inneholder feilen.

Prop:: title
Type:: string
Beskrivelse:: Tekst for menyvalget
Prop:: iconName?
Type:: icon
Beskrivelse:: Navn på ikon som vises i menyen
Prop:: target?
Type:: string | function
Beskrivelse:: Lenke eller funksjon som kjøres ved klikk

Header

Relaterte komponenter

Varianter

Retningslinjer for bruk

Bruk global header når

Bruk service header når

Unngå å blande global og service header

Headeren skal være enkel å forstå

Avsender og utlogging

Bruk riktig søkefelt

Responsivitet

Universell utforming

Headeren skal fungere med tastatur

Bruk riktige landemerker og ARIA-roller

Gjør innholdet forståelig for skjermlesere

Test på små skjermer og høy zoom

Anatomi global header

Anatomi service header

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Velg variant med `type`

Felles og variantspesifikke egenskaper

Global header henter innhold fra API

Content Security Policy / CSP

Tastaturnavigasjon i megamenyen

Menyen lukkes ved intensjonelle klikk

Behold menyen åpen ved klikk

Logoen er alltid en lenke

Om du kun bruker CSS

Endringer fra versjon 13 til versjon 14

Nye funksjoner

Breaking changes

Egenskaper

PktHeader

Props

Slots

Events

userMenu (element)

Header

Test komponenten

Relaterte komponenter

Varianter

Retningslinjer for bruk

Bruk global header når

Bruk service header når

Unngå å blande global og service header

Headeren skal være enkel å forstå

Avsender og utlogging

Bruk riktig søkefelt

Responsivitet

Universell utforming

Headeren skal fungere med tastatur

Bruk riktige landemerker og ARIA-roller

Gjør innholdet forståelig for skjermlesere

Test på små skjermer og høy zoom

Anatomi global header

Anatomi service header

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Velg variant med type

Felles og variantspesifikke egenskaper

Global header henter innhold fra API

Content Security Policy / CSP

Tastaturnavigasjon i megamenyen

Menyen lukkes ved intensjonelle klikk

Behold menyen åpen ved klikk

Logoen er alltid en lenke

Om du kun bruker CSS

Endringer fra versjon 13 til versjon 14

Nye funksjoner

Breaking changes

Egenskaper

PktHeader

Props

Slots

Events

userMenu (element)

Velg variant med `type`