Breadcrumb Navigation
Improve site structure. This script dynamically reads the browser's address bar and constructs a clickable path, helping users understand where they are on your site.
Simulated URL:
https://yoursite.com/products/electronics/laptops
Copy the Script
<nav id="breadcrumbs"></nav>
<script>
// Get path, ignore query strings
var path = window.location.pathname;
var parts = path.split("/").filter(function(part) { return part !== ""; });
var html = "<a href='/'>Home</a>";
var currentPath = "";
for (var i = 0; i < parts.length; i++) {
currentPath += "/" + parts[i];
// Capitalize first letter
var name = parts[i].charAt(0).toUpperCase() + parts[i].slice(1);
// Remove extensions
name = name.replace(".php", "").replace(".html", "");
html += " > <a href='" + currentPath + "'>" + name + "</a>";
}
document.getElementById("breadcrumbs").innerHTML = html;
</script>Frequently Asked Questions
It works best on URLs with a clear folder structure (e.g., `site.com/products/shoes/nike`). It parses the slashes `/` to create the trail.
The script uses the folder names from the URL by default. To rename them (e.g., change 'products' to 'Our Store'), you would need to add a mapping object or replace string logic in the script.
Yes. You can add logic to strip file extensions (.php, .html) or ignore 'index' files to keep the breadcrumbs clean.