Status |
|
---|---|
Figma | â Publisert |
CSS | â Publisert |
Vue | â Publisert |
React | â Publisert |
Dokumentasjon | â Publisert |
Om komponenten
Headeren er den globale navigasjonen pÄ vÄre tjenester og nettsider. Den er et viktig element for merkevarebygging og et gjenkjennelig element. Den gir brukeren oversikt og konsistens i vÄre lÞsninger og tjenester, i tillegg til en konsekvent avsender pÄ tvers av lÞsninger fra Oslo kommune. Headeren skal vÊre lik og konsistent pÄ alle sider av en applikasjon.
Ved Ä klikke pÄ navnet til den som er logget inn trigger man en ekspandert meny. Les mer om styling og bruk av denne her.
Varianter
I Punkt finnes to variasjoner av header:
- Innlogget header som brukes pÄ de fleste lÞsninger eller tjenester utviklet i Origo
- Utlogget header/generell header, altsÄ headeren brukt pÄ Oslo kommune sine nettsider (oslo.kommune.no)
Vi kommer til Ă„ beskrive innlogget header. Utseende og styling av header til Ă„pne nettsider eies av designteamet hos UKE.
Flere av elementene er overlappende, men det er ogsÄ noen forskjeller.
Innlogget header inneholder: logo, tjenestenavn, innlogget meny og mulighet for logg ut-knapp. Utlogget header inneholder: logo, sĂžkefelt, inngang til megameny, kontakt, og inngang til min side.
Grunnen til at sÞkefeltet ikke er inkludert i innlogget header er for Ä unngÄ forvirring. SÞkefeltet pÄ oslo.kommune.no er globalt og sÞker pÄ innholdet pÄ deres sider. Dersom man Þnsker et sÞkefelt pÄ innloggede sider mÄ det utformes annerledes og plasseres et annet sted pÄ siden.
Det er ikke tenkt at man skal bruke innlogget header med alle elementene inkludert. Har du en innlogget bruker som skal logge ut? Bruk kun knappen med brukerens navn. Ănsker du kun Ă„ gi brukeren mulighet til Ă„ logge ut, bruk logg ut-knappen osv.
Farger
Headeren skal alltid opptre med hvit bakgrunnsfarge. Man kan bruke alle knappestylinger (primÊr, sekundÊr og tertiÊr) pÄ hÞyre side. Ekspandert meny skal alltid styles likt og som det fremstÄr i designsystemet. Les mer om ekspandert meny her.
Responsivitet
Headeren er optimalisert for mindre enheter slik som mobil og nettbrett. Likevel er det viktig at du tester navigasjonen pÄ siden din pÄ mobil. GjÞr dette ved enten Ä bruke Figma mirror-appen i skisse-perioden eller Ä Äpne testlenker pÄ mobilen din i tillegg til desktop nÄr du tester.
PĂ„ mobil skjules noen av elementene og alt legges inn i menyen. Du kan selv velge om du vil vise initialene til den innloggede brukeren, eller kun bruker-ikonet.
Slik bruker du komponenten
Seksjoner
I headeren skal alltid logo og avsender vĂŠre plassert til venstre. PĂ„ hĂžyre side har man en seksjon for interaktive elementer og funksjonalitet, slik som sĂžk, meny, innlogget meny og âlogg utâ-knapp.
Logo
Oslologoen kan ikke kombineres med andre navn og mÄ alltid brukes i sin helhet. Les mer om riktig bruk av Oslo logoen her.
Det er ikke pÄkrevd, men om Þnskelig kan man legge til tjenestenavn ved siden av logo, dette legges det opp til i header pÄ denne mÄten (markert i rÞdt):
Inkluder bÄde navnet pÄ applikasjonen og logoen hvis tilgjengelig. Klikk pÄ applikasjonens navn eller logo skal ta deg til forsiden/starten til applikasjonen eller tilbake til oslo.kommune.no.
Navigasjonselementer
I hÞyre seksjon av headeren kan du implementere funksjonalitet. I headeren har vi lagt opp til meny, innlogget meny og logg ut-knapp. Alle mÄ ikke brukes samtidig. UnngÄ logg ut-knapp sammen med innlogget meny. Navigasjonen skal vÊre lik gjennom hele tjenesten din. Ha maksimalt fire elementer i hovednavigasjonen.
Bruk tydelige og konkrete tekster i lenkene.
GjĂžr dette/ikke gjĂžr dette
- Ikke endre stÞrrelsen pÄ headeren
- Behold strukturen i headeren - ikke endre plassering av logo, avsender eller funksjonalitet
- Ikke endre bakgrunnsfargen pÄ headeren
- Tenk over logisk knappestruktur
- Alltid ha Oslo-logoen pÄ venstre side og i sin helhet
- Hold antall navigasjonselementer nede
Anatomi
- Bakgrunn
- Oslo logo
- Tjenestenavn (valgfritt)
- Meny (valgfritt)
- Innlogget meny (valgfritt)
- Logg ut-knapp (valgfritt)