Simple AJAX Breadcrumb Menu (Free Download)

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 How It Works Useful Bits & Links
The End

 

 

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

1-breadcrumb.html
<!-- (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.inc"
}, false);
mybread.add({
  name : "Second",
  item : "4b-two.inc"
}, false);
mybread.add({
  name : "Third",
  item : "4c-three.inc",
  data : { key : "value" }
});
 
// (C3) PROGRAMMATICALLY GO TO CRUMB
// mybread.go(1); // go to second
</script>

  1. Captain Obvious, load the CSS and Javascript files.
  2. Create a <div> to generate the breadcrumb trail and content container.
  3. 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).

 

 

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

breadcrumb.js
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 Remember mybread.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

breadcrumb.js
// (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

breadcrumb.js
// (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.

 

USEFUL 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

 

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!

2 thoughts on “Simple AJAX Breadcrumb Menu (Free Download)”

  1. 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.

Leave a Comment

Your email address will not be published.