Intern header

Oppdatert 30. sep. 2022

Headeren kan inneholde flere ulike komponenter. Grunndesignet gir et generisk utgangspunkt og er likt på tvers av systemene. Interaksjon og komplekset bestemmes av de enkelte fagsystemer.

Egnet til å:

Saksbehandlingssystemer og utgangspunkt for andre interne løsninger.

Vurder noe annet:

Løsninger som bor på eksterne sider.

Kom i gang som designer

aksel.nav.no

Installer

aksel.nav.no

Eksempler

Åpne i nytt vindu

Varianter

Varianter av header kommer.

Tilgjengelighet

Interaksjon Tastatur

Her er de mest vanligste kombinasjonene.

Kommando	Interaksjon
`Tab`	Flytter fokus det neste interaktive elementet
`ShiftTab`	Flytter fokus det forrige interaktive elementet
`Space/Enter`	Interagere med elementer

Bruk

System menu

System-menyen inneholder lenker til andre fagsystemer og oppslagsverk. Meny-lenkene åpnes i nytt nettleservindu slik at saksbehandler kan fortsette å forholde seg til det systemet som er aktivt. Det er opp til det enkelte team hvor mange lenker de fyller den med. Overflow punktet er satt ved 550px høyde, når menyen oppnår denne høyden vil en scrollbar oppstå slik at menyen ikke blir altfor høy.

Username-dropdown

Ved å klikke på brukernavnet åpnes et dropdown element som viser brukers fulle navn, identnummer samt en lenke for å logge ut av systemet. Teamene avgjør selv om de vil introdusere mer informasjon i denne konteksten.

Props

Header

children ReactNode
className? string
ref? Ref<HTMLElement>

Header.Button

as? React.ElementType
children ReactNode
className? string
ref? Ref<HTMLButtonElement>

Header.Title

as? React.ElementType
children ReactNode
className? string
ref? Ref<HTMLAnchorElement>

Header.User

name string
description? string
className? string
ref? Ref<HTMLDivElement>

Header.UserButton

as? React.ElementType
name string
description? string
className? string
ref? Ref<HTMLButtonElement>