Internal header

StabilOPPDATERT 15. desember 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.

Har du innspill til komponenten?

Send forslag

Kom i gang som designeraksel.nav.no Installeraksel.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: Header content
className? string
ref? Ref<HTMLElement>: Header extends HTMLElement

Header.Button

as? React.ElementType: OverridableComponent-api
children ReactNode: Application Button
className? string
ref? Ref<HTMLButtonElement>: Header.Button extends HTMLButtonElement

Header.Title

as? React.ElementType: OverridableComponent-api
children ReactNode: Application title
className? string
ref? Ref<HTMLAnchorElement>: Header.Title extends HTMLAnchorElement

Header.User

name string: User name
description? string: User description
className? string
ref? Ref<HTMLDivElement>: Header.User extends HTMLDivElement

Header.UserButton

as? React.ElementType: OverridableComponent-api
name string: User name
description? string: User description
className? string
ref? Ref<HTMLButtonElement>: Header.UserButton extends HTMLButtonElement

Tokens

Token	Fallback
--ac-header-bg	--a-surface-inverted
--ac-header-divider	--a-gray-600
--ac-header-text	--a-text-on-inverted
--ac-header-hover-bg	--a-surface-inverted-hover
--ac-header-active-bg	--a-surface-inverted-active

Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår for mer info.