Header
Release dato: 25.08.2023
Sist oppdatert: -
Headeren er den globale navigasjonen for tjenester og nettsider i Oslo kommune. Den gir tydelig avsender og gjenkjennelighet pÄ tvers av lÞsninger, og skal vÊre lik pÄ alle sider i en applikasjon.
I headeren kan brukeren fÄ tilgang til meny, innlogget meny og logg ut-funksjon. Ved Ä klikke pÄ brukernavnet Äpnes en ekspandert meny.
Denne komponenten er under forbedring. Har du innspill, forslag eller tilbakemeldinger? Ta kontakt pÄ #punkt pÄ Slack eller send en e-post til punkt@origo.oslo.kommune.no.
Test komponenten
Relaterte komponenter
Innhold nederst pÄ siden eller lÞsningen din.
Samler navigasjonslenker i en meny i toppen
Viser hvor brukeren befinner seg i sidens struktur
Varianter
| Type | Bruk |
|---|---|
| Innlogget header | Brukes i de fleste innloggede lĂžsninger, viser logo, tjenestenavn, innlogget meny og/eller logg ut-knapp |
| Utlogget header | Brukes pÄ Äpne sider som oslo.kommune.no, viser logo, sÞkefelt, megameny og kontaktlenker |
Merk: Denne dokumentasjonen beskriver kun innlogget header. Utlogget header utvikles som del av oslo.kommune.no og webforvaltningen og kommer snart i Punkt.
Retningslinjer for bruk
Bruk header nÄr
- lĂžsningen har Oslo kommune som avsender
- du vil gi brukeren tilgang til navigasjon eller innlogget funksjonalitet
- du vil tydeliggjĂžre at lĂžsningen tilhĂžrer Oslo kommune
Dersom lÞsningen er et internt verktÞy eller en side uten offentlig tilgang, kan en egen header vÊre mer hensiktsmessig. Dette mÄ vurderes grundig og som hovedregel bÞr du alltid bruke header-komponenten.
Headeren skal vĂŠre enkel Ă„ bruke
Oslo-logoen skal alltid vises til venstre, i sin helhet. Tjenestenavn er valgfritt, men anbefales for tydelighet. Bruk kun nÞdvendige navigasjonselementer, og sÞrg for at strukturen er lik pÄ alle sider i tjenesten.
GjĂžr slik
UnngÄ
Innhold i header
Logo og avsender skal alltid stÄ til venstre. Navigasjonselementer som meny, innlogget meny og logg ut-knapp plasseres til hÞyre. Ikke bruk alle elementer samtidig, velg det som passer brukerens behov.
Behold struktur og utseende
Du kan tilpasse bakgrunnsfargen i headeren, men mÄ sÞrge for god kontrast og at det fortsatt matcher Oslo kommunes visuelle profil.
Oslo-logoen skal ikke kombineres med andre logoer og mÄ alltid vises i sin helhet. Les mer om riktig bruk av Oslo-logoen
GjĂžr slik
UnngÄ
SĂžk i header
SÞkefelt er ikke inkludert i innlogget header for Ä unngÄ forvirring med sÞket pÄ oslo.kommune.no, som er globalt. Hvis du trenger sÞk i en innlogget lÞsning, bÞr det plasseres som en egen komponent, for eksempel rett under header eller i hovedinnholdet.
Responsivitet
Headeren tilpasser seg automatisk til skjermstĂžrrelsen. PĂ„ mobil samles navigasjonen i menyen. Du kan velge om brukeren skal vises med initialer eller ikon.
Test alltid headeren pÄ mobil, nettbrett og desktop.
Universell utforming
Headeren skal vĂŠre tilgjengelig for alle â uansett hvilke hjelpemidler eller navigasjonsmetoder brukeren benytter. Det betyr at den mĂ„ fungere med bĂ„de tastatur, skjermleser og andre assistive teknologier.
GjÞr headeren forstÄelig og navigerbar
- Alle interaktive elementer skal kunne brukes med tastatur alene (for eksempel med âTabâ, âEnterâ og âEscâ).
- Bruk beskrivende og tydelige tekster pĂ„ knapper og lenker, unngĂ„ generiske lenketekster som âKlikk herâ.
- SĂžrg for tilstrekkelig kontrast mellom tekst og bakgrunn.
Bruk landemerker og ARIA-roller riktig:
<header>ellerrole="banner"for headerrole="navigation"ogaria-labelpÄ meny hvis det finnes flere navigasjoner pÄ sidenaria-expandedogaria-controlsfor Ä indikere tilstand pÄ nedtrekksmenyer
Tilpasset ulike brukere og kontekster
Forskning fra GOV.UK viser at brukere forventer:
- Konsistent plassering av navigasjon pÄ tvers av sider
- Enkle og intuitive etiketter pÄ menyvalg
- At det er lett Ă„ skille mellom innhold og navigasjon
- Mulighet for Ä forstÄ hvor man er i lÞsningen (for eksempel via aktiv tilstand eller breadcrumbs)
Viktig om implementasjon
Hvis du bruker React- eller Elements-versjonen av header, er riktig ARIA-stÞtte innebygd. Bruker du bare CSS, mÄ du selv sÞrge for:
- ARIA-attributter for meny og nedtrekk
- Fokus-stĂžtte og tastaturnavigasjon
- At
aria-expandedoppdateres riktig nÄr menyen Äpnes og lukkes
Forskning og anbefalinger for hvordan brukere forstÄr og beveger seg i digitale tjenester
Hvordan navigasjon og meny skal fungere med tastatur og skjermleser
Anatomi
| Element | Beskrivelse |
|---|---|
| 1. Bakgrunn | Hvit bakgrunn i hele headeren |
| 2. Oslo-logo | Plassert til venstre, lenker til forsiden |
| 3. Tjenestenavn (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 |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import { PktHeader } from '@oslokommune/punkt-react';Props og tokens
| Prop | Type | Beskrivelse |
|---|---|---|
logoLink | string | Hva skjer nÄr brukeren klikker pÄ logoen? |
serviceName | string | Navnet pÄ tjenesten som vises i headeren |
fixed | boolean | Skal headeren vĂŠre fast i toppen av siden? |
scrollToHide | boolean | Skal headeren skjules nÄr brukeren skroller ned? |
user | object | Brukerobjektet som inneholder informasjon om den innloggede brukeren |
userMenu | array | Menyen som vises nÄr brukeren klikker pÄ brukerknapp |
userMenuFooter | array | Innholdet som vises i bunnen av brukermenyen |
userOptions | array | Alternativer for brukeren som kan endres |
representing | object | Objekt som inneholder informasjon om representasjon, hvis aktuelt |
canChangeRepresentation | boolean | Skal brukeren kunne endre representasjon? |
showLogOutButton | boolean | Skal logg ut-knappen vises i headeren? |
showMenuButton | boolean | Skal menyknappen vises i headeren? |
| Event | Beskrivelse |
|---|---|
changeRepresentation | Bruker endrer representasjon |
logIn | Bruker klikker pÄ logg inn-knappen |
logOut | Bruker klikker pÄ logg ut-knappen |