Dynamically Adding Breadcrumbs with JavaScript

Breadcrumbs are a crucial navigational element for websites and web applications, allowing users to track their path from the homepage to the current page. While popular CSS frameworks like Bootstrap provide breadcrumbs components, understanding how to build custom breadcrumbs using JavaScript, HTML, and CSS can be a valuable skill for front-end developers. In this blog post, I will show you how-to create custom breadcrumbs that feature a "Home" link, ascending order functionality, and the ability to customize the appearance.

Step 1: Setting up the HTML

First, we'll create the basic HTML structure to set up our breadcrumbs container.

This container will be used to display the breadcrumbs on our web page:

  <!-- Breadcrumbs container -->
  <div id="breadcrumbs"></div>

Now add the JavaScript to the web page:

  <!-- External JavaScript file -->
  <script src="breadcrumbs.js"></script>

  <!-- Inline JavaScript to create breadcrumb links -->
  <script>
    // User-provided breadcrumb data (array of objects with order, name, and URL)
    const breadcrumbData = [
      { order: 1, name: "Category", url: "https://example.com/category/" },
      { order: 2, name: "Subcategory", url: "https://example.com/category/subcategory/" },
      { order: 3, name: "Product", url: "https://example.com/category/subcategory/product/" },
    ];

    // Call the function to create breadcrumbs
    createBreadcrumbs(breadcrumbData);
  </script>

Step 2: Creating the JavaScript

Now, we will build the JavaScript logic for creating our custom breadcrumbs. The JavaScript function createBreadcrumbs takes an array of objects containing the order, name, and URL for each breadcrumb item. It dynamically generates the HTML elements and appends them to the breadcrumbs container.

// breadcrumbs.js

// Function to create and display the breadcrumbs based on the provided data
function createBreadcrumbs(breadcrumbData) {
  const breadcrumbsContainer = document.getElementById("breadcrumbs");
  if (!breadcrumbsContainer) return; // Bail out if the container doesn't exist

  const breadcrumbsList = document.createElement("ul");
  breadcrumbsList.classList.add("breadcrumb"); // Add the "breadcrumb" class to the list

  // Sort the breadcrumb data based on the order number
  breadcrumbData.sort((a, b) => a.order - b.order);

  // Add the fixed "Home" link as the first item
  breadcrumbData.unshift({ order: 0, name: "Home", url: "https://www.himpfen.com/" }); // Add your home URL here

  // Create and append breadcrumb items (except the last item)
  breadcrumbData.slice(0, -1).forEach((item, index) => {
    const breadcrumbItem = document.createElement("li");
    breadcrumbItem.classList.add("breadcrumb-item"); // Add the "breadcrumb-item" class to each item

    const breadcrumbLink = document.createElement("a");
    breadcrumbLink.href = item.url;
    breadcrumbLink.textContent = item.name;
    breadcrumbLink.classList.add("breadcrumb-link"); // Add the "breadcrumb-link" class to the link
    breadcrumbItem.appendChild(breadcrumbLink);

    breadcrumbsList.appendChild(breadcrumbItem);
  });

  // Add the last breadcrumb item as plain text
  const lastBreadcrumbItem = document.createElement("li");
  lastBreadcrumbItem.textContent = breadcrumbData[breadcrumbData.length - 1].name;
  lastBreadcrumbItem.classList.add("breadcrumb-item"); // Add the "breadcrumb-item" class to the last item
  breadcrumbsList.appendChild(lastBreadcrumbItem);

  breadcrumbsContainer.appendChild(breadcrumbsList);
}

Remember to save the JavaScript in a filename called breadcrumbs.js.

Step 3: Styling with CSS

With the JavaScript logic in place, we need to create the CSS styles to make our custom breadcrumbs visually appealing. Below is the CSS code that replicates the style of popular CSS frameworks like Bootstrap.

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  list-style: none;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
}

.breadcrumb-item {
  display: flex;
}

.breadcrumb-item:not(:first-child)::before {
  display: inline-block;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

.breadcrumb-link {
  color: #007bff;
  text-decoration: none;
}

.breadcrumb-link:hover {
  text-decoration: underline;
}

Congratulations! You've successfully built custom breadcrumbs using JavaScript, HTML, and CSS. This tutorial covered creating a breadcrumb container, dynamically generating breadcrumb links based on the provided data, and styling them to resemble the look of popular CSS frameworks like Bootstrap. Custom breadcrumbs can significantly improve the user experience on your website by enabling users to navigate efficiently through your content. Experiment with different styles and customize the code further to match your specific project needs. Happy coding!