Status |
|
---|---|
Figma | ✅Publisert |
CSS | ✅Publisert |
Vue | ✅Publisert |
React | ✅Publisert |
Dokumentasjon | ✅Publisert |
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
- Bakgrunn/hele menyen
Seksjon 1: Pålogget bruker
- Pålogget bruker label
- Navn
Ekstra informasjon (sist pålogget, fødselsnummer eller lignende)
Brukermeny
- Link 1
- Link 2
- Link 3
- Link 4
Innlogget organisasjon
- Representerer label
- Navn på Representerer
- Organisasjonsnummer
- Lenke til å bytte representasjon
Brukervalg
- Link til innstillinger (kan endres)
- Link til logg ut
Horisontal lenkeliste
- Link 1
- Link 2