Website Performanance boost Breadcrum

SEO Help and Tips

Website Performanance boost Breadcrum

Here's an example of how you can create a breadcrumb navigation using JavaScript:

HTML:

<div id="breadcrumb"></div>

javascript:

<script> 

// Sample breadcrumb data

const breadcrumbData = [

  { title: 'Home', url: '/home' },

  { title: 'Category', url: '/category' },

  { title: 'Subcategory', url: '/category/subcategory' },

  { title: 'Current Page', url: '/category/subcategory/current-page' },

];

// Function to generate breadcrumb HTML

function generateBreadcrumb() {

  const breadcrumbContainer = document.getElementById('breadcrumb');

  const breadcrumbList = document.createElement('ul');

  

  breadcrumbData.forEach((item, index) => {

    const breadcrumbItem = document.createElement('li');

    

    if (index !== breadcrumbData.length - 1) {

      const link = document.createElement('a');

      link.href = item.url;

      link.textContent = item.title;

      breadcrumbItem.appendChild(link);

    } else {

      breadcrumbItem.textContent = item.title;

      breadcrumbItem.classList.add('active');

    }

    

    breadcrumbList.appendChild(breadcrumbItem);

  });

  

  breadcrumbContainer.appendChild(breadcrumbList);

}

// Call the function to generate breadcrumb

generateBreadcrumb();

</script>

CSS:

<style> 

/* Style the breadcrumb */

ul.breadcrumb {

  list-style: none;

  padding: 0;

  margin: 0;

}

ul.breadcrumb li {

  display: inline;

}

ul.breadcrumb li:not(:last-child):after {

  content: '/';

  margin: 0 0.5rem;

}

ul.breadcrumb li.active {

  font-weight: bold;

}

</style>

In this example, we have a breadcrumbData array that represents the breadcrumb hierarchy. Each item in the array contains a title and a url. The generateBreadcrumb function dynamically generates the breadcrumb HTML structure based on the data. It creates a <ul> element with individual <li> elements for each breadcrumb item. The last item is marked as active using a CSS class.

You can modify the breadcrumbData array to match your actual breadcrumb structure and update the styling as desired.

Note: This example uses plain JavaScript to generate the breadcrumb. However, if you are using a JavaScript framework or library like React, Vue.js, or Angular, you may have specific components or plugins available to handle breadcrumb navigation more efficiently within the framework's ecosystem.