File Under: JavaScript, Programming, UI/UX

Build Dynamic Breadcrumbs With JavaScript

Once upon a time, a web designer wished to communicate a page’s location within the hierarchy of an entire site. There was only a small space available at the top of the page. The designer thought for a while, and eventually found the answer between the keys of his keyboard:breadcrumbs.

What are breadcrumbs? Well, if you have ever browsed an online store or read posts in a forum, you have likely encountered breadcrumbs. They provide an easy way to see where you are on a site. Sites like Craigslist use breadcrumbs to describe the user’s location. Above the listings on each page is something that looks like this:

 s.f. bayarea craigslist > city of san francisco > bicycles 

Translated to English, that says “I’m looking at bicycles for sale within the city limits of San Francisco, which is located in the San Francisco bay area.” Phrased another way, it says, “If I go to the Craigslist home page, click on the San Francisco location, and then choose bikes for sale, then, with a little luck, I’ll find these listings.”

As far as I can tell, the name “breadcrumb navigation” is derived from the children’s story of “Hansel and Gretel” by the Brothers Grimm:

“Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.”

Smart Hansel! So, that’s the skinny on breadcrumbs. Now let’s look at how they can be used on your site to help your users find their way around.


Contents

  1. Breadcrumb structure
  2. Make them dynamic
  3. Alternate methods
    1. Optional code

Breadcrumb structure

Breadcrumbs work best with sites that are naturally hierarchical. Most sites are organized into directories and sub-directories on the file server, so this navigation system should be easy to implement if your site follows this standard rule of structure.

Before we move on to the actual code, let’s make sure we’re on the same page about what I mean when I say “hierarchy”. Consider this homepage of a young girl I’ll call Gretel:

Build_Dynamic_Breadcrumbs_fig1.gif

(thanks to Qwirksilver for the gingerbread house picture).

If we could look at Gretel’s files, we might see this:

Build_Dynamic_Breadcrumbs_fig2.gif

If Gretel wrote an article called “Why witches are evil,” she would put it in her “Witches” directory, under “Topics”. At the top of her page would be the following breadcrumbs:

 Home > All topics > Witches 

Now, let’s say Gretel started an article titled “About my family” and put it in her “About” folder. Her breadcrumbs for that article would be:

 Home > About 

As Gretel added to this article later, she started spending a lot more time writing about her brother Hansel. Since Gretel is the type of girl who likes to keep things super-organized, Gretel moved the article to the “Hansel” directory, underneath “Topics”.

Uh oh. Now her breadcrumbs are incorrect. Easy to fix, right? True enough when there is only one file. What if she happened to be moving hundreds of files or changing her entire directory structure?

I have been in that position. Trust me — it’s no fairy tale. On the next page, we’ll dive into the code, and I’ll show you how to make those breadcrumbs dynamic by using a little JavaScript.

Make them dynamic

Did you ever read about the frog who dreamed of being a king and then became one? Except for the name, the circumstances, and a few other minor details, JavaScript’s story is the same. After years of bad PR due to the over-use of pop-ups, JavaScript is back to claim its birthright as a light, client side language which the gives power of dynamic content to sites that don’t run server-side scripts.

The Dynamic Javascript Breadcrumbs script is a tiny bit of code that you can include in all of your pages. It looks at a page’s web address – specifically, the file directories – and determines the breadcrumbs to display.

First, get the code here from my site at DuVinci.com.

Now, put the JavaScript file on your server. For this application, we’ll assume that you keep your scripts in your site’s root folder (i.e., example.com/breadnav.js).

To add it to a page, paste the following right in the spot on the page where you want the breadcrumbs to display:

 <script language="javascript" src="http://www.wired.com/images/archive/breadnav.js">



 </script> 

Remember, the code assumes hierarchical structure, so it shows a crumb for each directory. Without changes to the code, Gretel’s breadcrumbs for writings about her brother would look like this:

 Home > Topics > Hansel 

Pretty good. But, based on the version she created by hand, we know that the “Topics” directory is supposed to display as “All topics.” To make this change, she needs to add an objurl entry in breadnav.js:

 objurl['topics'] = 'All topics'; 

Next, let’s suppose Gretel wants her breadcrumbs separated by a -> symbol instead of a > symbol. It’s a small change, but she is picky. She needs to change the value of crumbsep in breadnav.js, like so:

 crumbsep = "->"; 

Now, all Hansel articles will display this breadcrumb:

 Home -> All topics -> Hansel 


=

Alternate methods

Here are a couple other ways you can configure Dynamic Javascript Breadcrumbs by changing values in the breadnav.js file:

precrumb and postcrumb

These variables accept string values that are placed before and after each section of the breadcrumbs. This is different than crumbsep, in that it usually will be a tag to surround each crumb rather than sit in between crumbs. For example, by default, each crumb is surrounded by a tag that declares a span class called “crumb”. You could then add a style in your CSS of span.crumb. You can find out more about CSS in Mulder’s Stylesheets Tutorial.

rootpath

This variable sets the relative path of your main page. This determines which folder acts as the highest level in your site’s hierarchy. If you have your own domain name, such as example.com, you’ll want to use rootpath = "/";. But, if your site starts at example.com/gretel, you’ll want to set it as rootpath = "/gretel";

rootname

This is a string that determines what to call the home page. In the examples above, I used rootname = "Home";. Feel free to name your root location anything, but try to keep it intuitive.

ucfirst

Lastly, this variable determines whether a directory name should be capitalized when making it into a breadcrumb. A directory named gingerbread will show up in your breadcrumbs with a lowercase “g” unless you set ucfirst = 1. Then, the directory breadcrumb will display as “Gingerbread”.

And like that, we’re done. Go forth and apply dynamic breadcrumbs to your site. With any luck, it will live happily ever after.

Optional code

This code removes the link formatting

from the last breadcrumb.

This will prevent a redundant link

and give another visual cue to the user.



Wrap the original line of code below



 allbread += crumbsep + precrumb + "<a href="" + currenturl + "">" + displayname + "</a>" + postcrumb;





with an IF statement shown here.





if ( i < page_ar.length -2 )

    {

     allbread += crumbsep + precrumb + "<a href="" + currenturl + "">" + displayname + "</a>" + postcrumb;

     }

  else

    allbread += crumbsep +  displayname;