Very Simple AJAX Breadcrumb Menu (Free Download)

Welcome to a tutorial on how to create an AJAX-driven breadcrumb navigation menu. A breadcrumb menu is easy to create, and an “AJAX breadcrumb menu” is not that difficult either – Read on for the example!

 

TABLE OF CONTENTS

 

 

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

QUICKSTART – HOW TO USE

<!-- (A) LOAD CSS + JS -->
<link rel="stylesheet" href="breadcrumb.css">
<script src="breadcrumb.js"></script>

<!-- (B) WRAPPERS -->
<nav id="demoMenu"></nav>
<div id="demoWrap"></div>
 
<!-- (C) ATTACH -->
<script>
// (C1) CREATE BREADCRUMB INSTANCE
var bread = breadify({
  menu : document.getElementById("demoMenu"),
  wrap : document.getElementById("demoWrap")
});
 
// (C2) ADD BREADCRUMB(S)
bread.add("Page A", "pageA.html");
bread.add("Page B", "pageB.html");
bread.go();
</script>

For those who just want to use this as a “plugin”:

• (A) Load the CSS and Javascript, Captain Obvious at your service.
• (B) Create 2 HTML wrappers – One for the breadcrumb menu and another for the content.
• (C1) Call var bread = breadify({ menu:TARGET, wrap:TARGET }) to initialize the breadcrumb menu.
• (C2) Use bread.add(NAME, URL) to add a crumb, don’t forget to call bread.go() to load the last crumb.

 

 

 

PART 1) BREADCRUMB “INIT”

function breadify (instance) {
  // (A) PROPERTIES + SET CSS
  instance.loading = false; // currently loading
  instance.crumbs = []; // breadcrumbs
  instance.menu.className = "breadcrumb red"; // change the theme color if you want
 
  // ...
 
  // (D) DONE!
  return instance;
}

You already know breadify() from the quickstart above – This function creates the breadcrumb instance. The first thing that happens in Javascript, is to attach some flags and set the CSS.

• intance.loading AJAX is asynchronous. We will use this flag to “lock” the menu when a page is loading, unlock and allow more actions only when the loading is complete.
• instance.crumbs An array to contain the crumbs.
• There is nothing much about the CSS – It’s just cosmetics.

 

 

PART 2) ADDING CRUMBS

// (B) ADD A CRUMB
instance.add = (name, url) => { if (!instance.loading) {
  let c = document.createElement("div"),
      i = instance.crumbs.length;
  c.innerHTML = name;
  c.onclick = () => instance.go(i);
  instance.crumbs.push({ c : c, u : url });
  instance.menu.appendChild(c);
}};

As in the quick start above, we call instance.add() to create a new breadcrumb. This should be self-explanatory:

• Take note of instance.loading – We cannot add a new crumb when a page is loading. This is to prevent confusion and messing things up.
• Create an HTML <div> crumb.
• Push it into the instance.crumbs array and insert it into the HTML menu.

 

 

PART 3) LOADING A CRUMB

// (C) AJAX LOAD CRUMB
instance.go = i => { if (!instance.loading) {
  // (C1) WHICH CRUMB TO LOAD?
  let len = instance.crumbs.length - 1;
  if (len<0 || i==len) { return; } // stop if error or user select last crumb
  if (isNaN(i)) { i = len; } // none - load last crumb
  if (i<0 || i>len) { i = len; } // prevent error - load last crumb
 
  // (C2) FETCH URL
  instance.loading = true; // "lock" until loaded
  fetch(instance.crumbs[i]["u"])
  .then(res => res.text())
  .then(txt => instance.wrap.innerHTML = txt)
  .catch(err => console.error(err))
  .finally(() => {
    for (j=i+1; j<=len; j++) { instance.crumbs[j]["c"].remove(); }
    instance.crumbs = instance.crumbs.slice(0, i+1);
    instance.loading = false; // unlock
  });
}};

Finally, instance.go() is called when the user clicks on a crumb (or we call it manually to load the last crumb). This bit may be a little intimidating to beginners, but straightforward nonetheless.

• (C1) Determines which crumb to load.
  • if (len<0) Error handling – If there are no crumbs, there is nothing to load.
  • if (i==len) If the user clicks on the last crumb, there’s no need to reload.
  • if (isNaN(i)) As in the above quick start, load the last crumb when we call instance.go().
  • if (i<0 || i>len) Error handling for choosing an invalid crumb, just load the last crumb.
• (C2) Load the selected crumb.
  • instance.loading = true Lock the breadcrumb menu when the page is loading.
  • Self-explanatory, put the loaded content into the specified HTML wrapper.
  • Lastly, update the breadcrumb trail and unlock the menu.

 

 

 

GENERATED BREADCRUMB MENU HTML

<nav id="demoMenu" class="breadcrumb red">
  <div>Page A</div>
  <div>Page B</div>
</nav>

This is the HTML that is generated by Javascript – Simple enough?

 

LINKS & REFERENCES

• AJAX Examples With PHP – Code Boxx
• HTML CSS Breadcrumb – Code Boxx
• Fetch – MDN