How to Create an Automatic Breadcrumb Trail from the URL in Webflow

Learn how to automatically generate breadcrumbs from the URL in Webflow with JSON-LD structured data.

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to automatically generate breadcrumbs from the URL in Webflow, with JSON-LD structured data for SEO.

Example

Breadcrumb generated from the current URL

URL	Generated breadcrumb	JSON-LD
gemeosagency.com/academie/mon-article	Home / Academy / My Article	Yes, automatic
gemeosagency.com/blog/post	Home / Blog / Post	Yes, automatic
gemeosagency.com/services	Home / Services	Yes, automatic

1. Create the container in Webflow

Create a Div with the ID breadcrumb where you want the breadcrumb to appear. Set it to display: none by default: the script will make it visible and inject the content.

2. Customize the labels

The labels object translates URL slugs into readable labels. Add your own mappings: 'nos-offres': 'Our offers'.

3. Add the script in Footer code

(function() {
  var container = document.getElementById('breadcrumb');
  if (!container) return;

  var labels = {
    'academie': 'Academy',
    'blog': 'Blog',
    'services': 'Services',
    'realisations': 'Case Studies',
    'contact': 'Contact',
  };

  var parts = window.location.pathname.split('/').filter(Boolean);
  var html = 'Home';

  var path = '';
  parts.forEach(function(part, i) {
    path += '/' + part;
    var label = labels[part] || part.replace(/-/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); });
    html += '/';
    if (i === parts.length - 1) {
      html += '' + label + '';
    } else {
      html += '' + label + '';
    }
  });

  container.innerHTML = html;
  container.style.display = 'flex';
  container.style.alignItems = 'center';
  container.style.fontSize = '13px';
  container.style.flexWrap = 'wrap';
  container.style.gap = '0';
})();

4. Add the JSON-LD structured data

This second script automatically generates the BreadcrumbList schema for Google. Add it right after the first one in Footer code.

// JSON-LD for breadcrumbs (SEO)
(function() {
  var parts = window.location.pathname.split('/').filter(Boolean);
  var items = [{ '@type': 'ListItem', position: 1, name: 'Home', item: window.location.origin }];
  var path = window.location.origin;
  parts.forEach(function(part, i) {
    path += '/' + part;
    items.push({ '@type': 'ListItem', position: i + 2,
      name: part.replace(/-/g, ' '), item: path });
  });
  var script = document.createElement('script');
  script.type = 'application/ld+json';
  script.textContent = JSON.stringify({ '@context': 'https://schema.org',
    '@type': 'BreadcrumbList', itemListElement: items });
  document.head.appendChild(script);
})();

good to know

Breadcrumbs with structured data can appear in Google results instead of the URL: 'Gemeos > Academy > My article'. That's a strong structure signal for SEO, and it can improve CTR in the SERPs. Check the output with Google's Rich Results Test after publishing.

Conclusion

An automatic breadcrumb saves you from managing it manually page by page. Use cases:

Sites with lots of nested pages (blog, academy, docs)
E-commerce with categories and subcategories
Multilingual sites with a consistent URL structure

How to Create an Automatic Breadcrumb Trail from the URL in Webflow

Example

1. Create the container in Webflow

2. Customize the labels

3. Add the script in Footer code

4. Add the JSON-LD structured data

Breadcrumbs with structured data can appear in Google results instead of the URL: 'Gemeos > Academy > My article'. That's a strong structure signal for SEO, and it can improve CTR in the SERPs. Check the output with Google's Rich Results Test after publishing.

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials