How to Ensure Breadcrumb Navigation for Better User Experience and SEO?

Include breadcrumb trails at the top of your pages, especially on deeper content pages. Ensure that each breadcrumb link is clickable, allowing users to navigate back to higher-level pages easily.

‍

The best way to do it on Webflow is to:

1. Add a container to your page
2. Copy and paste the code below:

<div class="breadcrumbs"></div>

<script>
// Define the breadcrumb separator character
var separator = " > ";

// Initialize the breadcrumbs string with the Home link
var breadcrumbs = '<a href="/">Home</a>' + separator;

// Get the current URL and split it into parts
var pathArray = window.location.pathname.split("/");

// Remove the first empty item from the array (result of splitting the leading slash)
if (pathArray[0] === "") pathArray.shift();

// Loop through each part of the URL, adding it to the breadcrumbs string
for (var i = 0; i < pathArray.length; i++) {
  // Get the current part of the URL and remove any hyphens
  var part = pathArray[i].replace(/-/g, ' ');

  // Capitalize the first letter of the part
  part = part.charAt(0).toUpperCase() + part.slice(1);

  // Check if it's the last part of the URL
  if (i === pathArray.length - 1) {
    // Use the part as the last breadcrumb (instead of document.title)
    breadcrumbs += part;
  } else {
    // Add a link to the current part of the URL
    breadcrumbs += '<a href="/' + pathArray.slice(0, i + 1).join("/") + '">' + part + '</a>' + separator;
  }
}

// Insert the breadcrumbs string into the breadcrumbs container
var breadcrumbsContainer = document.querySelector(".breadcrumbs");
if (breadcrumbsContainer) {
  breadcrumbsContainer.innerHTML = breadcrumbs;
}
</script>

‍