Topbar B2B

Topbar er et navigasjonsmønster for Entur sine B2B-produkter. Den ligger alltid øverst i applikasjonen og samler appbytte, produktlogo, miljøvelger, søk og brukerhandlinger i én horisontal linje. Mønsteret er responsivt og har to hovedtilstander: uinnlogget og innlogget.

1. App-switch: Bytter mellom Entur-applikasjoner.
2. App-logo: Produktets navn og inngang til startsiden.
3. Miljøvelger (valgfritt): Viser og bytter mellom Dev, Staging og Prod.
4. Logg inn knapp: Tilgang til innlogging.
5. Min bruker indikator: Viser innlogget bruker. Rød prikk varsler at brukeren har uleste meldinger.
6. Miljøfargeindikator: Stripe nederst i topbar — farger indikerer aktivt miljø

Topbar B2B er bygget rundt en slot-modell som gir fleksibilitet til å plassere ulikt innhold i tre definerte soner. En slot er et åpent innholdsområde uten fast innhold — produktteamet fyller slotsene med de komponentene som passer deres behov.

Inneholder app-switch og app-logo. Disse er faste ankerpunkter for produktidentitet og navigasjon mellom Entur-applikasjoner.

Fleksibel midtseksjon. Brukes typisk til miljøvelger, men kan tilpasses til annet innhold som er sentralt for produktets arbeidsflyt.

Fleksibel høyreseksjon. Rommes av brukerhandlinger som innlogging og Min side-indikator, men kan også inkludere andre globale handlinger.

Topbar B2B-komponentene finnes i Entur UI Library i Figma. Her finner du beta-versjonen av komponentene som er under aktiv utvikling.

Kodeimplementasjonen av Topbar B2B er under utvikling og vil bli tilgjengelig i en fremtidig versjon.

Topbar plasseres alltid øverst i B2B-produktet og er en obligatorisk del av sideutformingen. Den fungerer som produktets primære navigasjonsramme og skal være synlig på alle sider.

Topbar B2B finnes i to fargevarianter som gir produktteamet frihet til visuell tilpasning, uten å gå på bekostning av funksjonalitet eller UX-mønstre.

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

Lys/hvit bakgrunn (tint-fargen). Topbar 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.

Begge varianter støtter miljøfargestripe og alle funksjonelle elementer (miljøvelger, Min side, osv.) på identisk vis.

Topbar er responsiv og tilpasser seg fire brekkpunkter. Elementer som krever mye plass forenkles eller reduseres til kun ikon på mindre skjermer.

Alle elementer vises i full bredde med tekst og ikoner.

• Miljøvelger: Segmentert kontroll med Dev, Staging og Prod synlig.
• Søk: Ikon + teksten «Søk».
• Brukerindikator: Ikon + brukernavn.

Miljøvelgeren forenkles for å spare plass. Øvrige elementer beholder ikon og tekst.

• Miljøvelger: Viser kun aktivt miljønavn som kompakt indikator.
• Søk: Ikon + teksten «Søk».
• Brukerindikator: Ikon + brukernavn.

Den mest kompakte varianten. Tekstelementer skjules og kun ikoner vises for å maksimere plassen til innhold.

• Miljøvelger: Viser kun aktivt miljønavn som kompakt indikator.
• Søk: Kun ikon.
• Brukerindikator / Logg inn: Kun ikon.

Merk: App-switch og App-logo vises på alle brekkpunkter uten endringer.

Her beskrives oppførselen til de viktigste elementene i topbar.

Tjenestevelgeren lar brukeren bytte mellom Entur sine B2B-applikasjoner. Den vises som et vaffelmeny-ikon helt til venstre i topbar og er alltid tilgjengelig, uavhengig av innloggingstilstand.

Ved klikk åpnes en nedtrekksmeny med to seksjoner: favoritter øverst og alle tilgjengelige tjenester under. Menyen er scrollbar når listen er lang. Gjeldende aktiv tjeneste er alltid visuelt markert i listen.

Favoritter er tjenestene brukeren har valgt å feste øverst i menyen for rask tilgang. De vises i en egen seksjon øverst, adskilt fra den fulle listen.

Når brukeren ikke har satt noen favoritter, skjules favorittseksjonen og kun «Alle tjenestene» vises. Dette sikrer at nye brukere aldri møter en tom meny.

Lenken «Rediger favoritter» er tilgjengelig i menyen og åpner redigeringspanelet. Den anbefales plassert ved siden av «Favoritter»-overskriften så den er synlig uten scrolling.

«Rediger favoritter» åpner et fullskjermpanel med alle tilgjengelige B2B-tjenester i en rutenettvisning. Her kan brukeren klikke på stjernen ved siden av en tjeneste for å legge den til eller fjerne den fra favoritter. Fylt stjerne betyr at tjenesten er valgt som favoritt.

Gjeldende aktive tjeneste er visuelt markert i listen, slik at brukeren har kontekst for hvor de befinner seg.

Panelet inneholder tre handlinger:

• Lagre: Bekrefter endringene og oppdaterer favorittlisten i menyen.
• Nullstille: Tilbakestiller til forrige lagrede favorittvalg.
• Avbryt: Lukker panelet uten å lagre endringer.

Miljøvelgeren er valgfri og vises kun når produktet støtter flere miljøer. Den er kun tilgjengelig for innloggede brukere.

Hvert miljø har sin egen fargeindikator som vises på to steder samtidig: som en horisontal stripe nederst i topbar, og som en pil på den segmenterte kontrollen som peker ned mot aktivt miljø.

Dev: Grønn (mint) stripe og grønn pil. Staging: Gul (canary) stripe og gul pil. Prod: Ingen fargestripe og nøytral/hvit pil — produksjon skal ikke fremheves visuelt.

Når brukeren klikker på «Prod» i miljøvelgeren, vises en bekreftelsesmodal for å forhindre utilsiktet bytte til produksjonsmiljøet. Modalen minner brukeren på at de er i ferd med å arbeide med ekte data.

Dette er et viktig sikkerhetstiltak som beskytter mot utilsiktede endringer i produksjonsdata.

På mobil er det ikke plass til den fulle segmenterte kontrollen. I stedet vises aktivt miljønavn som en kompakt knapp direkte i topbar. Klikk på knappen åpner en dropdown under topbar med den fulle segmenterte kontrollen (Dev / Staging / Prod), slik at brukeren kan bytte miljø.

Fargestripe og pil-indikator vises også på mobil med samme farger som på desktop.

Min side-elementet plasseres alltid helt til høyre i topbar og tilpasser seg innloggingstilstanden.

«Logg inn»-knappen vises øverst til høyre i topbar. Ved klikk sendes brukeren til innloggingssiden.

Brukerindikatoren viser brukerikon og brukernavn.

Ved klikk åpnes en meny med: Varsler (med teller for uleste), Tilganger, Opplysninger, Innstillinger, Kontakt og Logg ut. En rød varselbjelke på brukerikonet indikerer at brukeren har uleste meldinger eller varslinger.