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

 

 

 

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>

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

 

 

 

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

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

 

 

LINKS & REFERENCES

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