Breadcrumbs are a great way to enhance the website navigation for both website visitors and search engines. By using the breadcrumbs, you can make your website’s structure clear to search engines and allow better navigation for your visitors.

The following velo code adds the breadcrumbs to your Wix website’s dynamic Item pages. It has the link to the homepage, CMS list page, and the current item page. Furthermore, it also adds schema markup to your item page, which increases your website’s search ranking.

The Code

import wixLocationFrontend from 'wix-location-frontend';
import wixSeo from 'wix-seo';
$w.onReady(function () {
$w('#dynamicDataset').onReady(() => {
const currentItem = $w('#dynamicDataset').getCurrentItem();
if (currentItem) {
const homeCrumb = {
label: 'Home',
link: '/'
};
const cmsListPageLink = currentItem.listPageUrlField || '/wix-velo-code-library';
const cmsListCrumb = {
label: 'All Codes',
link: cmsListPageLink
};
const currentItemTitle = currentItem.title_fld;
const currentItemCrumb = {
label: currentItemTitle,
isCurrent: true
};
const breadcrumbs = [
homeCrumb,
cmsListCrumb,
currentItemCrumb
];
$w('#breadcrumbs').items = breadcrumbs;
const structuredData = {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": breadcrumbs.map((crumb, index) => {
const listItem = {
"@type": "ListItem",
"position": index + 1,
"name": crumb.label
};
if (crumb.link) {
listItem.item = wixLocationFrontend.baseUrl + crumb.link;
}
return listItem;
})
};
wixSeo.setStructuredData([structuredData]);
}
});
});