SEO / GEO

4 min

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 — co-founder 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
www.gemeosagency.com/en/academy/mon-article	Home / Academy / My Article	Yes, automatic
www.gemeosagency.com/fr/blog/post	Home / Blog / Post	Yes, automatic
www.gemeosagency.com/fr/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 turns 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 the 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

A breadcrumb with structured data can show up in Google results instead of the URL: “Gemeos > Academy > My article.” It’s a strong structural 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. Best use cases:

Sites with lots of nested pages (blog, academy, docs)
E-commerce sites 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

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials