Headermeny

Om komponenten

Vi skiller mellom to typer ekspandert meny: innlogget versjon og den som er lik oslo.kommune.no. Disse trigges ved å klikke på menyikonet eller navnet til den innloggede brukeren i header. Les mer om header her.

I Punkt har du tilgang til den innloggede menyen. Denne kan brukes i alle innloggede løsninger og kan inneholde flere forskjellige seksjoner, og det er denne vi kommer til å beskrive i nærmere detalj her.

For kodeeksempler og teknisk informasjon, se dokumentasjon for Header-komponenten.

Varianter

I menyen har vi 5 ulike seksjoner:

• Pålogget bruker
• Brukermeny
• Hvilken organisasjon du representerer
• Brukervalg (slik som innstillinger og logg ut)
• Horisontal lenkeliste

Du kan selv velge hvilken kombinasjon du ønsker basert på behovet i din løsning. Her kan du se noen alternativer for kombinasjoner:

Farger

Annenhver seksjon skal være hvit og grå ($gray-light: #F9F9F9), aldri ha to seksjoner i samme farge under hverandre. Du kan selv velge om du ønsker å starte med en hvit eller grå seksjon.

Responsivitet

På desktop skal den ekspanderte menyen åpne direkte under knappen med innlogget bruker.

På mobil fyller menyen hele skjermen i bredden.

Slik bruker du komponenten

For å ta i bruk komponenten bør man først ta en beslutning på hierarkiet på siden eller i tjenesten og vurdere hva som bør legges i brukermenyen. Velg så de ulike seksjonene og lenkene som trengs.

Du kan selv bytte ut alle lenker, ikoner og innhold. Les mer om gode lenker og lenketekster her.

Lenker og oppsett

Som nevnt har vi 5 ulike seksjoner i den ekspanderte menyen:

• Pålogget bruker
• Brukermeny
• Hvilken organisasjon du representerer
• Brukervalg (slik som innstillinger og logg ut)
• Horisontal lenkeliste

Vi anbefaler å ikke bruke alle seksjonene samtidig, da dette blir mye lenker og kan være forvirrende for brukeren. Hold deg til 2-3 seksjoner som dekker behovet til din løsning.

Pålogget bruker

Den innloggede brukeren sitt fulle navn skal vises i denne seksjonen. På mobil kan du velge om du ønsker å kun vise brukerikonet eller om du ønsker å vise initialene til brukeren. Du kan selv velge å ha mer informasjon om brukeren under navnet, for eksempel sist de logget inn eller annen relevant informasjon som rolle eller fødselsnummer.

Brukermeny

Brukermenyen skal inneholde lenker til sider i applikasjonen eller tjenesten. Vi har satt standard til 4 stykker, men du kan selv velge om du ønsker flere eller færre. Velg ikoner og lenketekster som er logiske for brukeren.

Hvilken organisasjon du representerer

Her skal den aktive organisasjonen vises. Ved klikk på “Endre organisasjon” skal brukeren tas til en side der de kan velge en annen organisasjon å representere.

Brukervalg

Logg ut-knappen skal lede brukeren til en side som bekrefter at de har logget ut. Du kan selv velge om du ønsker å inkludere en lenke til, for eksempel til innstillinger, denne skal ta brukeren til en ny side.

Horisontal lenkeliste

Brukes for det meste kun til lenker som personvern og kontakt. Bruk denne om løsningen din ikke har footer som inneholder denne informasjonen.

Gjør dette/ikke gjør dette

Unngå å bruke alle seksjonene samtidig

Hold navigasjonen enkel og konsis

Ha forskjellig farge mellom de ulike seksjonene

Anatomi