Intro
Stepper kan brukes for å indikere hvor brukeren er i en prosess. Kan brukes om navigasjons mønster mellom steg, eller for en visuell guide på progresjon. Selve komponenten bør være et supplement til andre mønstre eller indikatorer, og bør ikke være eneste måte å navigere en løsning på.
Egnet til å:
- Vise brukeren hvor langt de har kommet i en brukerreise.
- Spørreundersøkelser, søknadsprosess med flere steg, mm.
Vurder noe annet:
- Hvis stepper blir brukt som eneste måte å navigere på.
aksel.nav.no
aksel.nav.no
Horisontal versjon er tatt med for å støtte migrering av legacy-løsninger, men vi fraråder å bruke denne varianten. Horisontal stepper slik den er i dag støtter ikke mobile løsninger, så vi anbefaler å holde seg til vertikal om mulig.
Demo
Varianter
Vertikal/horisontal
Komponenten kan orienteres horisontalt eller vertikalt ettersom hvordan siden er bygd opp. Vi anbefaler sterkt å bruke vertikal variant da den passer bedre på mindre flater, eks på mobil.
Interactive
Man kan sette hele stepper til å ikke være interaktiv, eller steg for seg selv. Dette gir muligheten til å bygge opp en wizard-lignende flyt der fremtidige steg kan være "låst", mens tidligere steg er interaktive.
Completed
Alle steg har en prop completed som setter et checkmark der det tidligere var et tall. Dette kan brukes for å visuelt lettere la brukeren se hvilken steg de har fullført, og da hvilken de bør fullføre. Dette bør bare brukes som en visuell støtte-indikator.