So you need a breadcrumbs script? Why not ServerSideGuy.com ?

December 9, 2012

We recently had a breadcrumb script request and I thought I’d share what we decided to do. We will do this in javascript so that it is not bound to a specific server.

This is for more basic site layouts and revolved around splicing the window.location.pathname variable.

Requirements:

  • You will need jQuery plugged into your site.
  •  ^ That’s about it.

So first make an empty div that you want to hold the breadcrumbs in and give it an id of breadcrumbs.

Then use this script:

 

function breadcrumbs()
{
        var gretel = "";
	var href = window.location.pathname;
	var hansel = href.split("/");
	for (var i=2;i<(hansel.length-1);i++) {
	gretel+=""+hansel[i]+" » ";
	}
	i=hansel.length-1;
	gretel+=""+hansel[i]+"";
	var url =  gretel;
        $("#breadcrumbs").html(url);
}

The result will look something like this: Home »  Hansel » Gretel

This is a simple solution for parsing out your URL into breadcrumbs.

-Credit to Kevin Lynn Brown who originally came up with the concept of parsing the url.

Stay in Touch!

Stay in Touch!
Solutions Architecture

browse through our blog articles

Blog Archive