Create breadcrumb with wix code

Ask the community
,
1

I’m trying to create breadcrumbs for my site so that users can easier navigate through the site.
I do not want the entire trail of where the user has been.
An example of what I am looking for would be Personal Banking > Loans > Cash Loans.
I would also like to make each of them a hyperlink.
Is this possible to be done using wix?

1 Like
2

Hey
Let’s say you want a level of three in your breadcrumbs so se simplest way would be to create teh below array object.

let breadCrumbs = {
  level1Name: "Personal Banking",
  level1Url: "/personal-banking",
  level2Name: "Loans",
  level2Url: "/personal-banking-loans",
  level3Name: "Cash Loans",
  level3Url: "/personal-banking-loans-cash-loans"
}

Then in your code use the import {session} as you can read more about in the API Docs.

Then in your pages set the values when you hit the first page set breadCrumbs.level1Name = “Whatever title” and so on…

Use session.setItem(“breadcrumbs”, JSON.stringify(breadCrumbs)) to store that array in a session based JSON object… in your other page read in the array let breadCrumbs = JSON.parse(session.getItem(“breadcrumbs”)) so you will get the values in…

Then use a text elements html feature to set up your breadcrumbs like

$w(“#textElementID”).html = “” + breadCrumbs.level1Name + “&nbsp>&nbsp” + here comes level2 and so on…

Then you must use some kind of IF level1 exists do it, IF level2 and so on…

But I hope I can get you in the right direction.

3

Thanks for the reply Andreas, however I am having difficulties. I’m new to wix and pretty unfamiliar. As for the creation of the array object and the
import {session} from ‘wix-storage’;
should it be done in the page code, site code or both? Whats the difference between page codes and site codes?
Mind explaining what kind of codes should be in the page code and what should be in the site code?

4

Hi @godwinnwongsteam ,
Check out this article about working with the code panel.

5

Put it in page code for now, easier for you to manage now and then when you get more experienced move it to the places you feel best at that time.