Breadcrumb navigation plays a vital role in enhancing user experience on websites. It provides a clear, clickable trail, helping users retrace their steps and navigate effortlessly. But manually creating breadcrumbs for every page can be time-consuming, especially for dynamic websites. Enter jQuery: a lightweight, efficient way to automate breadcrumb generation based on the current URL.

Why Breadcrumbs Matter?

Breadcrumbs improve the user experience by.

How to Build Dynamic Breadcrumbs?

1. The HTML Framework

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Breadcrumbs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
</head>
<body>
    <div class="syllabus"></div>
</body>
</html>

2. Adding Some Style

<style>
    .syllabus a {
        font-size: 20px;
        font-family: auto;
        font-weight: 100;
        font-style: normal;
        text-decoration: none;
    }
</style>

3. The jQuery Script

<script type="text/javascript">
    $(document).ready(function () {
        var breadcrupbsCollection = $(location).attr('href').split('/');
        var url = '';
        var $html = '';
        
        for (let index = 3; index < breadcrupbsCollection.length; index++) {
            url += '/' + breadcrupbsCollection[index];
            
            if (index == breadcrupbsCollection.length - 1) {
                $html += '<a href="' + url + '">' + decodeURIComponent(breadcrupbsCollection[index]) + '</a>';
            } else {
                $html += '<a href="' + url + '">' + decodeURIComponent(breadcrupbsCollection[index]).replaceAll("%20", " ") + '</a> > ';
            }
        }
        
        $('.syllabus').html($html);
    });
</script>

Example Output

If the URL is: example.com/section/subsection/topic

The breadcrumbs generated will look like this.

section > subsection > topic

Benefits of this Approach

Advanced Tips

Conclusion

Dynamic breadcrumbs simplify website navigation and improve user experience. By leveraging jQuery, you can automate breadcrumb creation, saving time and effort while delivering a professional result.

Try implementing this script on your website today, and give your users the seamless navigation they deserve!

Have feedback or ideas to improve this? Drop a comment below!