Sidebar B2B

Oversikt

Sidebaren er en av de viktigste delene i et B2B-produkt. Den skal alltid være lett tilgjengelig og gjøre det enkelt å navigere mellom sider, justere innstillinger og forstå produktets struktur. Dette mønsteret dekker grunnlaget for komplekse B2B-løsninger med mange sider og funksjoner, der effektiv navigasjon er avgjørende.

Anatomi av sidebar

Produktlogo: Produktlogoen viser «Entur» etterfulgt av produktnavnet og fungerer som inngang til produktets startside.
Min bruker indikator: Viser hvem som er innlogget og gir tilgang til brukerhandlinger.
Miljøvelger (valgfritt): Viser og lar brukeren bytte mellom aktive miljøer.
Datasettvelger (valgfritt): Brukes når produktet støtter flere forhåndsdefinerte kontekster som påvirker hvilket datasett som vises på tvers av sider, for eksempel organisasjon eller kontoplan.
Navigasjonselement: Gir tilgang til sider i løsningen
Kollapskontroll: Lar brukeren utvide eller kollapse sidebaren.
Statisk støtteinformasjon (valgfritt): Inneholder sekundær informasjon plassert nederst i navigasjonen.

Når skal man bruke den?

Bruk sidebar i B2B-verktøy og produkter der brukeren må navigere mellom mange funksjoner og områder, og der strukturen har flere nivåer eller grupper av sider.

Unngå B2B-sidebar i løsninger med få navigasjonselementer (færre enn 5 menypunkter), eller der navigasjon brukes sjelden og hovedsakelig for å lese statisk innhold. Vurder heller å bruke topbar.

Mal for Portal B2B (beta)

Vi tilbyr en mal for vår anbefalte utforming av B2B Portaler til React. Malen gir et helhetlig sideoppsett med sidebar, hovedinnhold og eventuell statusbar. Malen består av slots (definisjon her) for innholdselementer som miljøvelger, datasettvelger, statisk støtteinformasjon osv.

Oppførsel

Produktlogo

Produktlogoen skal fungere som en inngang til produktets startside. Et klikk på logoen skal ta brukeren til start- eller oversiktssiden. Denne oppførselen skal være konsistent på tvers av hele produktet.

Miljøvelger

Når miljøvelgeren er tilgjengelig, skal aktivt miljø være tydelig markert. I dev og staging vises en fargestripe øverst i applikasjonen, der dev markeres med mint-40 og staging med canary-60. I produksjon (prod) vises ingen fargestripe.

Miljøvelgeren vises som en segmentert kontroll med tydelig markering av aktivt miljø. For å holde uttrykket konsistent skal logo og produktnavn alltid bruke Enturs merkevarefarge (coral), uavhengig av miljø. Produktnavnet skal ikke inkludere miljønavn som en del av teksten.

Min bruker indikator

Brukerindikatoren viser hvem som er innlogget og gir tilgang til brukerrelaterte handlinger. Indikatoren skal inneholde brukerikon og brukernavn.
Når brukerindikatoren aktiveres, åpnes en meny med tilgjengelige brukerhandlinger. Valg i menyen kan åpne en side, en modal eller utføre en direkte handling.

Datasettvelger

Når brukeren har tilgang til flere datasett, skal det aktive datasettet være tydelig synlig. Dersom kun ett datasett er tilgjengelig, skal datasettvelgeren ikke vises.
Datasettvelgeren presenteres som en søkbar nedtrekksliste som lar brukeren velge mellom tilgjengelige alternativer.

Navigasjonselement

Navigasjonselement brukes for å navigere mellom sider i løsningen. Aktiv side skal alltid være tydelig markert med indikatorstripe.

Navigasjonselement uten underside

Navigasjonselement uten undersider brukes for sider som ikke har behov for videre inndeling. Ved klikk navigerer brukeren direkte til siden, og elementet får aktiv tilstand.

Navigasjonselement med undersider

Navigasjonselement med undersider brukes for å gruppere relaterte sider. Elementet fungerer kun som en utvidbar kontroll og skal ikke navigere til en egen side.

Når et navigasjonselement med undersider åpnes, skal første underside velges automatisk. Dersom det finnes en oversiktsside, skal denne ligge som egen underside og åpnes når gruppen aktiveres.

Når en underside er aktiv og det overordnede elementet er utvidet, vises aktiv tilstand på undersiden. Når det overordnede elementet er lukket, vises aktiv tilstand på dette for å vise at en side i gruppen er aktiv.

Varsler i navigasjonselement (lokal implementasjon)

Navigasjonselement kan vise et merke eller en indikator for å signalisere at noe krever oppmerksomhet, for eksempel nye eller uleste hendelser.
Når det finnes varsler på undersider, vises det samlede antallet på det overordnede elementet når gruppen er lukket. Når gruppen åpnes, fordeles indikatorene på de relevante undersidene.

Når brukeren har sett innholdet som krever oppmerksomhet, fjernes indikatoren. Om dette gjelder ett eller flere varsler, avhenger av hva indikatoren representerer.

Kollapskontroll

Når sidebaren er kollapset, vises den i ikon-visning. Produktlogo vises som forkortet logo, og brukerindikator vises kun som ikon. Navigasjonselementer vises uten tekst.

Navigasjonselementer med undersider vises uten pil og kan ikke utvides. Dersom et navigasjonselement ikke har et ikon, kan første bokstav i navnet brukes.

Design og layout

Posisjon og størrelse

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 80 px eller 5 rem. Les mer om rem.

Spacing

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

Entur logo

Logoen i sidebaren skal være 24 px høy og bestå av «ENTUR» etterfulgt av produktnavn. «ENTUR» skrives med store bokstaver, og produktnavn starter med stor bokstav. Ingen annen tekst skal inngå i logoen.

Navigasjonsgruppe

Ikon bruk

Vi anbefaler å bruke ikoner kun på første nivå i sidebaren. Undersider bør vises uten ikon for å holde hierarkiet tydelig og gjøre navigasjonen raskere å skanne, siden kun hovedkategorier får ikon.

Vi anbefaler å bruke ikoner konsekvent: enten har alle elementer på første nivå ikon, eller ingen. Hvis det er vanskelig å finne gode ikoner, eller innholdet er svært spesifikt eller brukergenerert, anbefaler vi tekstbasert navigasjon uten ikoner.