How to create breadcrumb navigation dynamically?

Breadcrumb navigation is a UI pattern that helps users track their location within a website or application. It provides a hierarchical path back to previous pages, enhancing user experience and navigation efficiency.

Why Use Dynamic Breadcrumbs?

Static breadcrumbs work for simple sites, but dynamic breadcrumbs are essential for large or dynamically generated websites where pages change frequently. A dynamic breadcrumb system adapts based on the user’s navigation path and the current page structure.

Step-by-Step Guide to Creating Dynamic Breadcrumb Navigation

Step 1: Understanding the Breadcrumb Structure

A breadcrumb trail typically consists of:

Home Link → A link to the homepage.
Category Links → Intermediate navigation levels like sections or categories.
Current Page (Last Item) → The current page without a hyperlink.

Example Breadcrumbs:

Home > Blog > Web Development > Dynamic Breadcrumb Navigation
Home > Products > Electronics > Mobile Phones > Samsung Galaxy S24

Step 2: Setting Up the Project Structure

If you’re using a front-end framework like React or Vue.js, you need a structure to store and generate breadcrumbs dynamically.
For simplicity, we will use JavaScript, HTML, and CSS.

Project Folder Structure

/breadcrumb-project
   |-- index.html
   |-- styles.css
   |-- breadcrumb.js

Step 3: Creating the HTML Structure

The breadcrumb container will be a simple <nav> element with an unordered list (<ul>).

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Breadcrumb Navigation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav aria-label="breadcrumb">
        <ul id="breadcrumb"></ul>
    </nav>
    
    <script src="breadcrumb.js"></script>
</body>
</html>

Step 4: Styling the Breadcrumbs with CSS

Breadcrumbs should be visually appealing and easy to navigate.

styles.css

nav {
    font-family: Arial, sans-serif;
}

#breadcrumb {
    list-style: none;
    display: flex;
    padding: 10px;
}

#breadcrumb li {
    display: inline;
    font-size: 16px;
}

#breadcrumb li:not(:last-child)::after {
    content: " > ";
    margin: 0 5px;
}

#breadcrumb li a {
    text-decoration: none;
    color: #007bff;
}

#breadcrumb li a:hover {
    text-decoration: underline;
}

Step 5: Implementing JavaScript for Dynamic Breadcrumbs

We will create a script that dynamically generates breadcrumbs based on the current URL path.

Extracting Path Segments from the URL

We need to split the URL and generate breadcrumb items based on the segments.

breadcrumb.js

document.addEventListener("DOMContentLoaded", function () {
    generateBreadcrumb();
});

function generateBreadcrumb() {
    let breadcrumbContainer = document.getElementById("breadcrumb");
    let currentPath = window.location.pathname;  // Get the URL path
    let pathSegments = currentPath.split("/").filter(segment => segment); // Remove empty values
    
    // Home link
    let homeItem = document.createElement("li");
    let homeLink = document.createElement("a");
    homeLink.href = "/";
    homeLink.textContent = "Home";
    homeItem.appendChild(homeLink);
    breadcrumbContainer.appendChild(homeItem);

    let fullPath = "";

    pathSegments.forEach((segment, index) => {
        fullPath += `/${segment}`;
        
        let listItem = document.createElement("li");
        
        // If it's the last segment, display it as plain text
        if (index === pathSegments.length - 1) {
            listItem.textContent = formatBreadcrumbLabel(segment);
        } else {
            let link = document.createElement("a");
            link.href = fullPath;
            link.textContent = formatBreadcrumbLabel(segment);
            listItem.appendChild(link);
        }

        breadcrumbContainer.appendChild(listItem);
    });
}

// Function to format breadcrumb labels (capitalize and replace hyphens)
function formatBreadcrumbLabel(segment) {
    return segment.replace(/-/g, " ").replace(/\b\w/g, c => c.toUpperCase());
}

Step 6: Explanation of the Code

window.location.pathname → Retrieves the current URL path.
split("/") → Splits the path into an array.
.filter(segment => segment) → Removes empty segments caused by leading/trailing slashes.
fullPath += /${segment}“ → Constructs the breadcrumb URL dynamically.
formatBreadcrumbLabel() → Formats the text by capitalizing words and replacing hyphens with spaces.

Step 7: Testing the Breadcrumb Functionality

Try running the code on different pages:

/about-us/our-team → Home > About Us > Our Team
/blog/web-development/breadcrumbs-guide → Home > Blog > Web Development > Breadcrumbs Guide

Step 8: Enhancing the Breadcrumb Navigation

1. Adding Icons or Separators

Modify the CSS to include icons instead of >:

#breadcrumb li:not(:last-child)::after {
    content: " 〉 ";
}

2. Using JSON Data for Breadcrumbs

Instead of relying on the URL, you can define breadcrumbs using a JSON object:

const breadcrumbData = {
    "/": "Home",
    "/about": "About Us",
    "/services": "Our Services",
    "/services/web-development": "Web Development",
};

// Generate breadcrumbs based on predefined JSON
function generateBreadcrumbFromData() {
    let breadcrumbContainer = document.getElementById("breadcrumb");
    let currentPath = window.location.pathname;

    let listItem = document.createElement("li");
    let homeLink = document.createElement("a");
    homeLink.href = "/";
    homeLink.textContent = "Home";
    listItem.appendChild(homeLink);
    breadcrumbContainer.appendChild(listItem);

    let paths = Object.keys(breadcrumbData).filter(path => currentPath.startsWith(path));

    paths.forEach(path => {
        let listItem = document.createElement("li");
        let link = document.createElement("a");
        link.href = path;
        link.textContent = breadcrumbData[path];
        listItem.appendChild(link);
        breadcrumbContainer.appendChild(listItem);
    });
}

Step 9: Integrating Breadcrumbs into a Web Application

If you’re using frameworks like React, you can create a breadcrumb component.

React Example:

import { Link, useLocation } from "react-router-dom";

const Breadcrumbs = () => {
    const location = useLocation();
    const pathnames = location.pathname.split("/").filter(x => x);

    return (
        <nav>
            <ul className="breadcrumb">
                <li><Link to="/">Home</Link></li>
                {pathnames.map((value, index) => {
                    const to = `/${pathnames.slice(0, index + 1).join("/")}`;
                    return (
                        <li key={to}>
                            <Link to={to}>{value.replace(/-/g, " ")}</Link>
                        </li>
                    );
                })}
            </ul>
        </nav>
    );
};

export default Breadcrumbs;