Welcome to a tutorial and example of an AJAX-driven breadcrumb navigation menu with pure Javascript. The breadcrumb navigation is one of the most “traditional” menus in the history of web design, but the times have changed – Let us walk through a “modernized AJAX breadcrumb” in this guide, read on!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
QUICKSTART – HOW TO USE
<!-- (A) LOAD CSS + JS -->
<link rel="stylesheet" href="2-breadcrumb.css">
<script src="3-breadcrumb.js"></script>
<!-- (B) DEMO WRAPPER -->
<div id="demo"></div>
<!-- (C) ATTACH BREADCRUMB -->
<script>
// (C1) CREATE BREADCRUMB INSTANCE
var mybread = breadify(document.getElementById("demo"));
// (C2) ADD BREADCRUMBS
mybread.add({
name : "First",
item : "4a-one.html"
}, false);
mybread.add({
name : "Second",
item : "4b-two.html"
}, false);
mybread.add({
name : "Third",
item : "4c-three.html",
data : { key : "value" }
});
// (C3) PROGRAMMATICALLY GO TO CRUMB
// mybread.go(1); // go to second
</script>
- Captain Obvious, load the CSS and Javascript files.
- Create a
<div>
to generate the breadcrumb trail and content container. - Attach the breadcrumb.
- (C1) Just use
var mybread = breadify(TARGET)
to initialize. - (C2) To add crumbs to the trail, simply use
mybread.add(OPTIONS, LOAD)
.OPTIONS.name
Name of the trail.OPTIONS.item
The URL to load.OPTIONS.data
Optional data to POST to the URL.LOAD
Immediately load the given URL? Defaults to true.
- (C3) If you want to go to a crumb programmatically, simply call
mybread.go(N)
.
- (C1) Just use
HOW IT WORKS
With that, let us now move into more details – For you guys who want to customize and add more functions.
A) BREADCRUMB PROPERTIES
function breadify (instance) {
// (A) PROPERTIES
instance.htrail = document.createElement("ul");
instance.hwrap = document.createElement("div");
instance.trail = [];
instance.loading = false;
instance.current = -1;
// (F) DONE!
return instance;
}
You already know breadify()
from the quickstart above – This is the function that we call to create a breadcrumb instance. The first thing that happens in Javascript, is to attach some flags and properties.
htrail
The HTML breadcrumb trail.hwrap
The HTML content area (to AJAX load contents).trail
Remembermybread.add()
? The object that you specify gets pushed into this array.loading
To “lock” the trail when a page is loading. I.E. Clicking on the trail will do nothing when a page is loading.current
The current “page”.
B) BREADCRUMB HTML
// (B) ATTACH HTML
instance.htrail.classList.add("bread-trail");
instance.hwrap.classList.add("bread-wrap");
instance.appendChild(instance.htrail);
instance.appendChild(instance.hwrap);
Next, we generate the necessary HTML. Will leave an example of the generated HTML below if you are interested, or if you want to customize the CSS.
C TO E) BREADCRUMB FUNCTIONS
// (C) AJAX LOAD PAGE
instance.load = idx => {
// (C1) LOCK UNTIL LOADING IS COMPLETE
instance.loading = true;
instance.current = idx;
// (C2) DATA, IF ANY
let data = new FormData();
if (instance.trail[idx].data) {
for (let [k,v] of Object.entries(instance.trail[idx].data)) {
data.append(k, v);
}
}
// (C3) AJAX FETCH & UNLOCK WHEN DONE
fetch(instance.trail[idx].item, { method:"POST", body:data })
.then(res => res.text())
.then(txt => {
instance.hwrap.innerHTML = txt;
instance.loading = false;
});
};
// (D) GO TO CRUMB
instance.go = idx => { if (!instance.loading && idx!=instance.current) {
for (i=idx+1; i<instance.trail.length; i++) {
instance.trail[i]["li"].remove();
}
instance.load(idx);
}};
// (E) ADD CRUMB
instance.add = (crumb, load) => {
// (E1) ADD HTML CRUMB
let idx = instance.trail.length;
crumb.li = document.createElement("li");
crumb.li.innerHTML = crumb.name;
crumb.li.onclick = () => instance.go(idx);
instance.htrail.appendChild(crumb.li);
// (E2) PUSH CRUMB
instance.trail.push(crumb);
if (load==undefined) { load = true; }
if (load) { instance.load(idx); }
};
Lastly, the mechanics of the AJAX breadcrumb. This looks complicated, but look carefully again. There are only 3 functions here:
load()
AJAX load the specified crumb.go()
Go to the specified crumb (AJAX load the crumb and delete all crumbs after the specified one).add()
You already know this one.
GENERATED HTML
<div id="demo">
<ul class="bread-trail">
<li>First</li> <li>Second</li> <li>Third</li>
</ul>
<div class="bread-wrap">CONTENT</div>
</div>
This is the HTML that is generated by Javascript – Use this to help do your own CSS theme.
EXTRA BITS & LINKS
That’s all for this project, and here is a small section on some extras and links that may be useful to you.
LINKS & REFERENCES
- AJAX Examples With PHP – Code Boxx
- HTML CSS Breadcrumb – Code Boxx
- Fetch – MDN
THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
Dear Code Box,
I don’t see your full functionality of your demo breadcrumb.
The better idea you should have a video demo how to make it works after downloading.
I don’t know how to make it works after download.
The most important of the reader is the result of what they want.
However thank you very much for nice preparation on your blog.
OK.
https://code-boxx.com/faq/#nodemo
https://code-boxx.com/faq/#help
https://code-boxx.com/faq/#notwork