Egnet til:

• plassere navn på løsningen eller aktiv/innlogget bruker.
• plassere overordnede aksjoner til løsningen.
• snarvei til startsiden i løsningen.

Uegnet til:

• publikumsløsninger. Bruk TopbannerExternal i stedet.

Komponenter som ligner:

TopBannerExternal brukes på samme måte for publikumsløsninger.

Teknisk dokumentasjon

Se TopBannerInternal i Storybook for tekniske detaljer. 

Varianter

Bakgrunnsfarge

Intern topp har burgunder som standard bakgrunnsfarge, og er ment brukt i alle løsninger som brukes av etatens ansatte. I spesialtilfeller, for eksempel når vi lager samarbeidsløsninger på tvers i det offentlige, er det mulig å overstyre fargen ved å bruke designtokens (denim-100).

Hvordan bruke komponenten  

Logo og tittel

Logoen er en sentral del av komponenten og lik for skatteetatens løsninger. Det er mulig å sette inn ikke-standard logo for eksempel til bruk i tverretatlige samarbeid. Det er også mulig å automatisk skjule logo på mobil eller små skjermer for å spare plass. Logoen sammen med tittel fungerer som en snarvei tilbake startsiden for løsningen. Tittelområdet til høyre for logo er reservert til navn på løsningen, og en valgfri undertittel for å sette kontekst. Til høyre har vi plassert innlogget bruker, som også er valgfritt. 

Intern topp med logo, tittel og saksbehandler:

Aksjonsmeny

Aksjonsmeny er underkomponent til intern toppbanner. Menyen er ment å inneholde lenker eller snarveier til separate sider i løsningen. 

Åpen aksjonsmeny og tilhørende knapp:

Funksjon for å hoppe til hovedinnhold

For å hjelpe folk som bruker skjermlesere eller andre verktøy, har komponenten en mekanisme for å hoppe til hovedinnhold. Den hopper enkelt over menyen og de andre funksjonene i toppen. Når brukeren kommer inn på en ny side, unngår den at toppen leses på nytt hver gang.

Knapper og søk

Normalt anbefaler vi å plassere aksjonsknapper og søk i en rad under den interne toppbanneren. Men i noen tilfeller, særlig hvis man trenger å spare plass i høyden, kan det være nyttig å plassere søk noen så aksjoner direkte i toppbanneren. Bruk da standard søkefelt og inlineButton-knapper til bruk på mørk bakgrunn. 

Intern toppbanner med meny, søk og aksjon:

Intern toppbanner med knapperad under:

Testmodus

For å skape et tydelige skille mellom test og produksjon er det mulig å vise en sort og gul teststripe i toppen. Denne stripen er altså kun ment å bli brukt i forbindelse med testing.  

Med teststripe og visning av innholdsblokk:

Mønster

Se mønster for internt sideoppsett for å se hvordan denne komponenten kan plasseres på siden.

Universell utforming  

• Sjekk at første tabstopp i toppbanneret er lenken Hopp til hovedinnhold og at den setter fokus til hovedinnholdet i løsningen.