Free Trial

A Script For Breadcrumb Navigation

January 28, 2009 - 11:00 AM

Most web users are familiar with breadcrumb navigation. It can be useful when a site is organized in a hierarchical fashion. Yahoo! has detailed the typical problem and solution in their Design Pattern Library.

This short tutorial will provide a JavaScript that you can include in Markup Factory or any other web site. The script will be detailed here. It's pretty advanced, but if you follow the requirements set out here, you can just download it and put it on your site.

In order for this to be as simple as possible, there are some things that must be done in order for this to work. Fortunately, Markup Factory makes this easy. Here are the requirements:

  • The Prototype JavaScript Framework. We're fans of Prototype.js here at Markup Factory, and this script uses some of Prototype's features, which will be explained here.
  • The URLs of your pages must be hierarchical and each level must be a valid link. That means if you have a page located at /about/products/widgets/foo/, then /about, /about/products, and /about/products/widgets must also be real pages. This is easy in Markup Factory, as you can give a page any address you like.
  • When the script runs, it replaces underscores (_) and dashes (-) in the URLs to make the breadcrumb navigation. Using other characters and file extensions may result in the results not being as pretty as possible.
  • The end user must have JavaScript enabled. If they don't, no problem, they just won't see the breadcrumbs.

How it Works

The script does the following when the page loads:

  • Take the URL path and split its parts into an array, excluding empty parts.
  • If there are more than 0 parts, add a “Home” link to the root of the site.
  • Go through each part of the path and create a URL and a link.
  • Take the part and replace _ and - with spaces, then capitalize each word and make that the link.
  • Once that's complete, find a DIV on the page with an ID of “breadcrumbs” and replace its contents with the link you've created.

So, if your URL is http://gottung.net/my/page/for-the/bread_crumbs/test/, you'll get something like this:

 

Home > My > Page > For The > Bread Crumbs > Test

 

The code is in two functions. The first part extends the native JavaScript String to have a capitalize_each_word function:

String.prototype.capitalize_each_word = function () {
    var words = this.split(" ");
    var str = "";
    words.each(function (word, index) {
        str += word.capitalize()
        if (index !== (str.length - 1)) { str += " "; }
    });
    return str;
}

This demonstrates a powerful but controversial feature of the JavaScript language, often called Monkey patching. You can add methods to any object, even native ones. This should be done with extreme caution as it could create conflicts with other peoples' code and wreak havoc. This case seems pretty harmless, so let's go with it.

The next part is the actual function, which is placed inside a document.observe callback which fires when the DOM is ready. This means that when the page is downloaded and ready to go, then this script will start. Prototype.js uses this pattern to make starting your scripts a little easier.

The rest of the code isn't pretty, but it does exactly what was described earlier. The Prototype.js-specific functions used are: document.observe(), Array.without(), $, Array.each(), String.gsub(), and Element.update(). You'll also see our capitalize_each_word() function in action:

document.observe('dom:loaded', function () { 
    var output = "";
    var url = "";
    var path = location.pathname.split("/").without("");
    var div = $("breadcrumbs");

    if (path.length >= 1) {
        output += "Home > ";
        path.each(function (i, index) {
            url += "/" + i;
            i = i.gsub("[-|_]"," ").capitalize_each_word();
            if (index !== (path.length - 1)) {
                output += "" + i + " > ";
            } else { output += i; }
        });
    }
    if (div) { div.update(output); }
});

Including in Your Markup Factory Site

You can download this script below and add to a Template or Snippet. Somewhere in the page body, usually before the main content of the page, you'll need to put a DIV where the breadcrumbs will be inserted:



You'll usually leave this empty, but you can put whatever you want within the DIV tag. It will be replaced when the script runs.

Then, somewhere before the closing of the BODY tag, include Prototype.js (served from the Google AJAX Libraries API) and the script:



Upload breadcrumbs.js to your Files and you're ready to go.

Download the Script

breadcrumbs.js

Related Resources on the Web

Conclusion

We hope you were informed and enlightened by this example. Any comments would be appreciated, and help is always available at support@markupfactory.com. If you haven't yet experienced how Markup Factory can help you make a great web experience, try the demo. We hope you like what you see. If you do, sign up.

Copyright © 2017 Cramer Development also offering Web Design in Iowa City. All rights reserved.Terms of ServicePrivacy PolicyFAQContact Us