Jeg lager nettsider og nettbutikker
SKREDDERSYDD ETTER DITT BEHOV OG ØNSKE
Ta kontakt for et uforpliktende tilbud!

Hvordan lage en brødsmulesti i Webflow

Å ha en oversiktlig navigasjon på nettsiden din er veldig viktig, så man kan finne det man søker raskt uten å måtte lete rundt. Men av og til kan selv den mest strukturerte menyen ikke gi klar nok informasjon om hvor man er og hvordan man kommer tibake dit man var.

En brødsmulesti er en effektiv måte å vise tydelig hvor man er og hvordan man kommer raskt tilbake til siden man var på eller forsiden. En brødsmulesti er ganske enkelt en rekke med lenker som vises rett over innholdet på siden.

Dersom du synes en brødsmulesti med kun tekst lenker er kjedelig, kan du style den med et litt lekrere design om du ønsker det.

Å lage en brødsmulesti i Webflow, er ganske enkelt:

  1. Lag en collection og kall den f.eks Produktkategori ( = hoved kategori)
  2. Lag en collection og kall den f.eks Produktgruppe (= underkategori)
  3. Koble disse to sammen ved å legge inn referencefields.
  4. Legg 1 og 2 inn som reference fields  i produktkategorien

På produktets side:

  1. Legg inn en flexbox container med 4 lenker etter hverandre. Gi hver lenke en 1 em padding på høyre side.
  2. Sett den første til forsiden
  3. Sett den andre til "current product" – og velg feltet "Produkt kategori"
  4. Sett den tredje til "current produc"t og velg feltet "Produkt gruppe"
  5. Sett den fjerde til "current product" og velg "name"

På Produktgruppe siden:

  1.  Som pkt 1 over
  2.  Som pkt 2 over
  3. Sett denne til "link til page" "produkt kategori" og velg produkt kategori "navn"
  4. Settdenne til "link til page" "current product gruppe" og velg "navn"

På Produkt kateori siden:

  1. Som pkt 1 over
  2. Som pkt 2 over
  3. Sett denne til "link til page" "current produkt kategori" og velg "navn"

Dersom du ønsker litt mer informasjon kan du se en tutorial her:

how-to-build-breadcrumb-navigation-for-webflow

Eller video her:

https://www.youtube.com/watch?v=mFF5jaGGqfA&feature=youtu.be