Egnet til:

• å fungere som topplinje i publikumsløsninger

• å støtte navigasjon, innlogging, meny, søk, språkvalg og bytte av representasjon

Uegnet til:

• interne løsninger, bruk TopBannerInternal i stedet

Teknisk dokumentasjon

Se TopBannerExternal i Storybook for tekniske detaljer.

Hvordan bruke komponenten  

Funksjon for å hoppe til hovedinnhold

For å gjøre det enklere for brukere med skjermleser eller andre hjelpemidler, har komponenten en snarvei som lar dem hoppe rett til hovedinnholdet. På den måten slipper de å gå gjennom menyen og andre elementer i toppen hver gang. Når brukeren går til en ny side, leses ikke topplinjen opp igjen.

Innlogging

Logg inn-knappen vises i toppbanneret når brukeren ikke er logget inn. Etter innlogging tilpasses visningen basert på skjermstørrelse og hvilke aktører brukeren kan representere – for eksempel virksomheter eller privatpersoner som har gitt fullmakt.

Vi skiller mellom følgende scenarioer:

• Bruker representerer kun seg selv: Går rett videre til landingsside.
• Bruker representerer personer eller virksomheter: Viser RolePicker (representasjonsvelgeren) med valgbar liste over tilgangene.

• Regnskapsfører/proffbruker: Avhengig av system.

Visningslogikk og tilpasninger for innlogget flate

Normalvisning 
I normalvisning på innlogget flate vises alle standardelementene:

• språkvelger
• logg ut-knapp
• søkefunksjon
• brukermeny med blant annet lenke til representasjonsvelger.
• meny 

Oppgavemodus
Når brukeren gjør en oppgave, som å fylle ut et skjema eller følge en prosess, fjerner vi meny, søk og brukerskuff for å unngå distraksjoner. I stedet viser vi et grått felt under toppbanneret som viser hvem brukeren representerer.

Kampanjesider
På kampanjesider tilpasses toppbanneret for å fremheve kampanjeinnholdet. Dette kan innebære at noen standardelementer skjules eller byttes ut med kampanjerelatert informasjon.

Språk

Språkvelgeren er stedet hvor brukeren kan velge mellom ulike visningsspråk. Våre publikumsløsninger skal være på bokmål, nynorsk og engelsk. Samisk brukes i løsninger som har særlig interesse for den samiske befolkningen. Detaljer knyttet til språk finner du på språksiden i Stil og tone under god praksis.

Meny

Menyen tilbyr tre innholdsblokker hvor vi kan plassere menyelementer. I de innloggede løsningene fordeles innholdet slik:

• Blokk A har lenker til innlogget innhold, som for eksempel innboks, skatt og aksjeoppgave.
• Blokk B har lenker til temainnhold for person og virksomhet som også finnes på uinnloggede flater. Eksempel er utenlandsk, pensjon og flytte. Blokken har også lenke til rettskilder og innhold om oss, som for eksempel kontaktskjema. 
• Blokk C er en tilleggsblokk kommer etter standardinnholdet.

 

Responsiv oppførsel (kommer snart)

På små skjermer (breakpoint xs og mindre) reduseres plassen i topplinjen. Da skjer følgende endringer:

• Språkvelgeren flyttes inn i menyen

• Logg ut-knappen flyttes til brukermenyen

Brukerskuff (kommer snart)

Via brukerskuffen skal brukeren kunne bytte representasjon. I tillegg finnes det lenker til varsler, Min side og informasjon om brukeren. På størrelse xs og mindre finnes også logg ut-knappen i brukermenyen slik som i eksempelet her: 

Universell utforming  

• Sjekk at «Hopp til hovedinnhold» er koblet til riktig element (main) i hovedinnholdet og at tastaturfokuset settes dit når du velger lenken.