Logged-in menu

Release dato: 25.08.2023

Sist oppdatert: -

Logged-in menu gir brukeren tilgang til navigasjon i løsningen. Den brukes som regel sammen med header, men kan også brukes andre steder ved behov.

Logged-in menu er del av header-komponenten og følger automatisk med ved bruk av Punkt sin header. Se header for demo og kode.

Har du noen innspill til komponenten?Gi oss beskjed!

Relaterte komponenter

Header

Overliggende navigasjon

Breadcrumbs

Viser hvor brukeren befinner seg i sidens struktur

Footer

Innhold nederst på siden eller løsningen din.

Varianter

Logged-in menu har én variant, men du kan tilpasse innhold og struktur etter behov. Det er støtte for flere seksjoner og valgfritt antall lenker.

Retningslinjer for bruk

løsningen har behov for navigasjon til flere områder eller seksjoner
du vil gi brukeren en tydelig og samlet meny i headeren

løsningen har få, faste lenker, da er det ofte bedre å bruke vanlige lenker direkte i headeren

Hold menyen ryddig og oversiktlig. Bruk korte og tydelige lenketekster. Unngå for mange valg, vi anbefaler maks to nivåer (hovedlenke + eventuelle underlenker).

Gjør slik

Unngå

Tenk igjennom innhold og navigasjon

Før du tar i bruk logged-in menu, bør du vurdere:

Hva brukeren trenger tilgang til under innlogging
Om noen lenker heller bør plasseres i hovedmeny, footer eller på selve siden

Du kan tilpasse menyen med egne lenker, ikoner og seksjoner. Se også retningslinjer for lenketekster.

Oppbygning

Logged-in menu kan bestå av inntil fem seksjoner:

1. Pålogget bruker: Viser brukerens fulle navn. På mobil kan du velge mellom å vise et ikon eller initialer. Du kan også legge til tilleggsinformasjon, for eksempel sist innlogget eller rolle.

Åålogget bruker med sist innlogget informasjon

Pålogget bruker med stillingsinformasjon

2. Brukermeny: Inneholder lenker til relevante sider i tjenesten. Vi anbefaler maks fire lenker, men antallet kan justeres etter behov. Velg ikoner og lenketekster som er logiske for brukeren.

Vertikal lenkeliste med generiske lenker

Vertikal lenkeliste med ulike ikoner og titler

3. Representert organisasjon: Viser hvilken organisasjon brukeren representerer. Brukeren skal kunne klikke på «Endre organisasjon» for å velge en annen.

Representert organisasjon med organisasjonsnummer og lenke for å endre organisasjon

4. Brukervalg: Omfatter logg ut-knappen, som skal føre til en side som bekrefter at brukeren er logget ut. Du kan også inkludere andre valg, som en lenke til innstillinger.

Brukervalg med innstillinger og logg ut knapp

5. Horisontal lenkeliste: Brukes til lenker som personvern og kontakt. Denne seksjonen anbefales kun hvis løsningen ikke har en footer med denne typen informasjon.

Responsivitet

Logged-in menu tilpasser seg automatisk skjermstørrelsen og fyller bredden av skjermen. På mobil vises menyen som en hamburgermeny.

Test menyen på mobil, nettbrett og desktop for å sikre at alt fungerer som forventet.

Universell utforming

Logged-in menu skal være tilgjengelig for alle brukere:

Alle lenker og menyer skal fungere med tastatur og skjermleser
Sørg for tydelige fokusmarkeringer
Bruk riktige ARIA-roller og attributter (f.eks. aria-expanded, aria-controls)
Kontrastkrav er ivaretatt av Punkt-fargene

Hvis du bruker React eller Elements: Alt av ARIA-støtte er innebygd
Hvis du kun bruker CSS: Du må selv legge til tastaturnavigasjon og ARIA manuelt

Anatomi

Element	Beskrivelse
1. Bakgrunn	Bakgrunnsfarge
2. Pålogget bruker	Viser brukerens navn, evt. rolle og sist innlogget
2.1 Ledetekst	Teksten “Pålogget som”
2.2 Navn	Fullt navn eller brukernavn på innlogget bruker
2.3 Sist innlogget	Tidspunkt for siste innlogging (valgfritt)
3. Brukermeny	Lenker til relevante sider i løsningen
3.1-3.4 Lenker	Tilpassede lenker som kan inneholde ikon og tekst
4. Representert organisasjon	Tilpassede lenker som kan inneholde ikon og tekst
4.1 Ledetekst	Teksten “Representerer”
4.2 Organisasjonsnavn	Navn på organisasjonen
4.3 Organisasjonsnummer	Org.nr. tilknyttet organisasjonen
4.4 Endre organisasjon	Lenke for å bytte organisasjon
5. Brukervalg	Handlinger knyttet til brukerens sesjon
5.1 Innstillinger	Lenke til innstillinger
5.2 Logg ut	Lenke for å logge ut av løsningen
6. Horisontal lenkeliste	Eventuelle tillegg som kontakt og personvern
6.1. Kontakt	Lenke til kontaktinformasjon
6.2 Personvern	Lenke til kontaktinformasjon

Implementasjon i kode

Se dokumentasjonen for header. Logged-in menu er en integrert del av header-komponenten.

Egenskaper

For props se dokumentasjonen for header. Logged-in menu er en integrert del av header-komponenten.