Navbar B2B

Side navigationbar er en vertikal navigasjonsløsning for produkter med mange sider eller kompleks struktur. Egner seg best når brukeren ofte navigerer mellom flere deler av løsningen.

1. Datasettvelger (valgfritt): Lar brukeren bytte mellom datasett som påvirker innholdet på tvers av sider. Kan brukes som organisasjonsvelger, kontoplanbytter eller lignende avhengig av produktets behov.
2. Navigasjonselementer: Gir tilgang til sider i løsningen.
3. Kollapskontroll: Lar brukeren utvide eller kollapse sidebaren.

Mørk marineblå bakgrunn (accent-fargen). Gir topbar en tydelig og distinkt identitet som skiller navigasjonsrammen fra sidens innhold. Velegnet for produkter som ønsker sterk visuell kontrast mellom topbar og innholdsflaten.

Lys/hvit bakgrunn (Default-fargen). Side navigasjonsbar smelter mer inn med sidens innhold og gir et lettere, mer åpent uttrykk. Anbefalt for produkter med lyse grensesnitt der en mørk topbar ville føles tung.

Datasettvelgeren vises øverst i sidebaren når funksjonaliteten er tilgjengelig. Den gjør det mulig å bytte kontekst uten å forlate siden man er på.
Når brukeren åpner velgeren, vises en liste delt inn i tre seksjoner:

• Nylige – datasett brukeren nylig har besøkt
• Favoritter – datasett markert for rask tilgang
• Bla gjennom alle – full liste med søk og filtrering

Dette gjør det mulig å både navigere raskt og håndtere store mengder datasett.

Logo kan vises der det er tilgjengelig. Hvis ikke, bruk et standardikon (for eksempel by- eller bygningsikon), eller dropp ikon helt.

Navigasjonselementer gir tilgang til sider i løsningen og utgjør kjernen i sidepanelet. De kan brukes alene eller organiseres i grupper.

Navigasjonsgrupper brukes for å strukturere innholdet og gjøre det lettere å skanne.

• Består av en tekstlabel
• Er ikke klikkbar
• Brukes kun som visuell gruppering

NavigationItem brukes for sider som ikke har behov for videre inndeling.

• Navigerer direkte til en side
• Viser tydelig hvilken side som er aktiv

Navigasjonselementet kan vises med:

• Ikon (valgfritt): Visuell indikator for å identifisere siden raskere.
• Alert dot (valgfritt): Vises når det finnes varsler eller notifikasjoner som krever oppmerksomhet.
• Badge (valgfritt): Viser en numerisk verdi, for eksempel antall uleste elementer.

Expandable navigation item brukes for å gruppere undersider og kontrollere visning av undermenyer.

• Åpner og lukker en undermeny
• Navigerer ikke til en egen side

Et utvidbart navigasjonselement skal ikke være en egen destinasjon. For grupper av navigasjon med oversikt side, anbefaler vi å ha en submeny som heter oversikt som ligger øverst i listen.

Lukket tilstand med aktiv underside

Når en underside er aktiv og elementet er lukket:

• Det overordnede elementet vises som aktivt
• Eventuelle notifikasjoner vises som alert dot på overordnet nivå

Åpen tilstand

Når elementet er utvidet:

• Det overordnede elementet går tilbake til default state
• Aktiv status vises på gjeldende underside
• Alert dots vises på relevante undersider

Ikoner kan brukes for å gjøre navigasjonen raskere å skanne, men må brukes konsekvent.

• Enten har alle toppnivå-elementer ikon, eller ingen
• Blanding skal unngås

For sidebar anbefales det å:

• Bruke ikoner på toppnivå
• Unngå ikoner på undersider for å redusere visuell støy

Sidebar kan kollapses for å gi mer plass til innholdet.

• Panelet skjules og vises som en smal stripe
• Brukeren kan utvide det igjen ved behov

Navigasjonspanelet tilpasser seg skjermstørrelse for å sikre god brukervennlighet.

• Desktop: Full visning, med mulighet for manuell kollaps
• Tablet: Starter i kollapset tilstand
• Mobil: Åpnes som et sidepanel ved behov

Sidebaren plasseres alltid på venstre side av skjermen og strekker seg fra toppen til bunnen av visningsområdet. Sidebaren har fast bredde og skal ikke endres per produkt. Full bredde er 320 px eller 20 rem. I kollapset tilstand er bredden av 40 px eller 2,5 rem. Les mer om rem.

Følgende spacing definerer standardoppsettet for sidenavigasjon. Komponenter som ikke er tilgjengelige i produktet fjernes, uten å endre øvrige avstander.

Top navigationbar er en horisontal navigasjonsløsning for produkter med få sider og en enkel struktur. Den gir en lettvekts navigasjon som ikke tar mye plass i grensesnittet.

Den egner seg best når navigasjon ikke er hovedfokus i brukerflyten.

1. Datasettvelger (valgfritt): Lar brukeren bytte mellom datasett som påvirker innholdet på tvers av sider. Samme funksjon som i sidebar, men plassert horisontalt.
2. Navigasjonselementer: Gir tilgang til sider i løsningen.

Mørk marineblå bakgrunn (accent-fargen). Gir topbar en tydelig og distinkt identitet som skiller navigasjonsrammen fra sidens innhold. Velegnet for produkter som ønsker sterk visuell kontrast mellom topbar og innholdsflaten.

Lys/hvit bakgrunn (Default-fargen). Side navigasjonsbar smelter mer inn med sidens innhold og gir et lettere, mer åpent uttrykk. Anbefalt for produkter med lyse grensesnitt der en mørk topbar ville føles tung.

Datasettvelgeren vises i topbar-navigasjonen når funksjonaliteten er tilgjengelig. Den gjør det mulig å bytte kontekst uten å forlate siden man er på.

Når brukeren åpner velgeren, vises en dropdown med tre seksjoner:

• Nylige – datasett brukeren nylig har besøkt
• Favoritter – datasett markert for rask tilgang
• Bla gjennom alle – full liste med søk og filtrering

Dette gjør det mulig å både navigere raskt og håndtere store mengder datasett.

Logo kan vises der det er tilgjengelig. Hvis ikke, bruk et standardikon (for eksempel by- eller bygningsikon), eller dropp ikon helt.

Navigasjonselementer gir tilgang til sider i løsningen og utgjør kjernen i topbar-navigasjonen.

NavigationItem brukes for sider som ikke har behov for videre inndeling.

• Navigerer direkte til en side
• Viser tydelig hvilken side som er aktiv

Navigasjonselementet kan vises med:

• Ikon (valgfritt): Visuell indikator for å identifisere siden raskere.
• Alert dot (valgfritt): Vises når det finnes varsler eller notifikasjoner som krever oppmerksomhet.

Expandable navigation item brukes for å vise undersider i en dropdown.

• Fungerer som en kontroll for å åpne menyen
• Inneholder lenker til undersider

Lukket tilstand med aktiv underside

Når en underside er aktiv og elementet er lukket:

• Det overordnede elementet vises som aktivt
• Eventuelle notifikasjoner vises som alert dot på overordnet nivå

Aktiv underside

I motsetning til sidebar-varianten navigerer det utvidbare elementet i topbar til den aktive undersiden når brukeren klikker på det. Dropdown-menyen lukkes og det utvidbare elementet viser aktiv status.

Ikoner kan brukes for å gjøre navigasjonen raskere å skanne, men må brukes konsekvent.

• Enten har alle elementer ikon, eller ingen
• Blanding skal unngås

Topbar-navigasjonen tilpasser seg skjermstørrelse for å sikre god brukervennlighet.

• Desktop: Full visning av alle navigasjonselementer
• Tablet: Vises i full bredde så lenge det er tilstrekkelig plass
• Mobil: Konverteres til en kollapset stripe som åpner et sidepanel med navigasjonen

Topbaren plasseres alltid på toppen av skjermen og strekker seg fra venstre til høyre siden av visningsområdet. Topbar har fast høyde og skal ikke endres per produkt. Full høyde er 56 px eller 3.5 rem.

Følgende spacing definerer standardoppsettet for topnavigasjon. Komponenter som ikke er tilgjengelige i produktet fjernes, uten å endre øvrige avstander.