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.

Relaterte komponenter

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.

Logged-in menu med ulike type innhold

Retningslinjer for bruk

Bruk logged-in menu nÄr

  • lĂžsningen har behov for navigasjon til flere omrĂ„der eller seksjoner
  • du vil gi brukeren en tydelig og samlet meny i headeren

UnngÄ logged-in menu nÄr

  • lĂžsningen har fĂ„, faste lenker, da er det ofte bedre Ă„ bruke vanlige lenker direkte i headeren

Logged-in menu skal vĂŠre enkel Ă„ bruke

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

Bruk korte lenker og organiser innholdet i logiske seksjoner

UnngÄ

UnngÄ lange eller utydelige lenketekster

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 informasjonPĂ„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 lenkerVertikal 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 organisasjonRepresentert 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.

Horisontal lenkeliste

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.

Header med logged-in menu pÄ mobil

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

Anatomi

ElementBeskrivelse
1. BakgrunnBakgrunnsfarge
2. PĂ„logget brukerViser brukerens navn, evt. rolle og sist innlogget
2.1 LedetekstTeksten “PĂ„logget som”
2.2 NavnFullt navn eller brukernavn pÄ innlogget bruker
2.3 Sist innloggetTidspunkt for siste innlogging (valgfritt)
3. BrukermenyLenker til relevante sider i lĂžsningen
3.1-3.4 LenkerTilpassede lenker som kan inneholde ikon og tekst
4. Representert organisasjonTilpassede lenker som kan inneholde ikon og tekst
4.1 LedetekstTeksten “Representerer”
4.2 OrganisasjonsnavnNavn pÄ organisasjonen
4.3 OrganisasjonsnummerOrg.nr. tilknyttet organisasjonen
4.4 Endre organisasjonLenke for Ă„ bytte organisasjon
5. BrukervalgHandlinger knyttet til brukerens sesjon
5.1 InnstillingerLenke til innstillinger
5.2 Logg utLenke for Ă„ logge ut av lĂžsningen
6. Horisontal lenkelisteEventuelle tillegg som kontakt og personvern
6.1. KontaktLenke til kontaktinformasjon
6.2 PersonvernLenke til kontaktinformasjon
logged-in menu anatomi

Implementasjon i kode

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

Props

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