Gal Segal's Blog

Thoughts of a programmer with a soul

Jan 24

Extended Breadcrumbs Navigation

Tags:

Follow_the_Breadcrumbs_by_Emilystar

Breadcrumbs are a familiar way for navigation in many websites. They are used to show to user the viewed page in the hierarchy of the website. One thing breadcrumbs are limited to is that they only support upwards navigation, meaning, you can use them to go up in the hierarchy, but not sideways or dig deeper.

In my work, I had to come up with a solution for this limitation: I had to use the breadcrumbs for showing pages that are in the same level as the viewed page, as well as the next level. So, this is what I came up with.

The idea behind this kind of behavior was that I needed all the hierarchy to be present in the document in some way, and also indicate what is the current item that is being watched. What I did was to create a structured hierarchic JavaScript object that will define the hierarchy, and draw the breadcrumbs navigation on the fly every time a new page was requested. When the basic navigation was displayed, I also create 2 other hidden menus – one for the same level navigation, that will pop out when the user hovers the one of the nodes on the basic navigation, and another one, at the end of the basic navigation, for the next level.

If I need to show countries, these are the steps I used when watching “UK and Ireland” page:

  1. Create a JavaScript (json) object that holds the hierarchy, and load it only once.
  2. Create the basic navigation, meaning : “World -> Europe -> UK and Ireland”.
  3. Create a “same level navigation” that will be visible on hovering the “UK and Ireland” node, with regions like “Central Europe”, “Eastern Europe” etc.
  4. Create a “next level navigation” with all the countries in the “UK and Ireland” region, like “United Kingdom”, “Ireland” etc.

The Code:

The engine in the code is a method that can query the hierarchic object and give 3 kinds of results:

  1. Find a node by id.
  2. Find parent node by id.
  3. Find children nodes for a given id.

This method uses a recursive pattern to get the needed results and it looks like this:

function getLocation(parent, id, selector) {
	//check if root element is the requested node
	if (settings.hierarchy.LocationID == id) {
		settings.location = settings.hierarchy;
		return;
	}
	$.each(parent.Children, function (i, e) {
		//stop search if location was found
		if (settings.location != undefined)
			return;
		//if no selector was defined -
		//set the location has the node itself
		if (selector == undefined) {
			if (e.LocationID == id) {
				settings.location = e;
				return;
			}
		}
		else {
			//if node selector(LocationID or ParentLocationID) equals the id -
			//set location as the parent node
			if (e[selector] == id) {
				settings.location = parent;
			}
		}
		//if no match - do it again, one level deeper
		if (e.HasChildren) {
			getLocation(e, id, selector);
		}
	});
}

Using this method to find a node by ID is pretty easy: We assign the root object as the “parent”, and the requested ID as the “id”.

The method will run each child of the root’s children and compare ids. If not found, it will call this method again, this time with the child’s node as the parent and so on. One important thing to mention, when one of the node finds the correct child node, it will assign it to an outer variable, and thus notify all other branches of the method to stop looking.

If we assign the “selector” parameter, this method will look for the node that the “selected” property indicates, and this is how we can get the same level nodes for a given ID,(by querying for “parent” node of a given node, and get all its’ children) or all the next level node (by querying for the location id ).

So, basically there are 3 methods that use the engine: one for the main navigation, one for the same level, and one for the next level.

I added a demo built on ASP.NET MVC 3 RC, and you can download it here and use it as you like.

The CSS created by Ivan Zelenovsky Thanks!!!

Happy Coding :)

//gets the location parent node for a given location id(recursive)
function getLocation(parent, id, selector) {
//check if root element is the requested node
if (settings.hierarchy.LocationID == id) {
settings.location = settings.hierarchy;
return;
}
$.each(parent.Children, function (i, e) {
//stop search if location was found
if (settings.location != undefined)
return;
//if no selector was defined –
//set the location has the node itself
if (selector == undefined) {
if (e.LocationID == id) {
settings.location = e;
return;
}
}
else {
//if node selector(LocationID or ParentLocationID) equals the id –
//set location as the parent node
if (e[selector] == id) {
settings.location = parent;
}
}
//if no match – do it again, one level deeper
if (e.HasChildren) {
getLocation(e, id, selector);
}
});
}
Back to top