Dopp Juice Archive

When I’m a fool, I feel the need to make a public announcement about it. Let the whole world know where I screwed up, so the rest of its inhabitants won’t make the same mistake. Here’s my confession: I doubted technology. And I was wrong to do so.My graphic designer approached me this week and asked me to build the navigational structure for a complex website. “Oh,” he added, “and the client wants Javascript breadcrumbs, so you should work that in.” What? Javascript breadcrumbs!? You can’t use Javascript to make breadcrumbs! You need to use a content management system, so a database knows where all your pages are in relation to each other and can regurgitate the info as needed. The only other solution is to hard-code the breadcrumbs! How can Javascript know what the hierarchy of your site looks like?! It can’t be done!I ate my words an hour later. Stuck my foot in my mouth while I was at it, too. Just for good measure. So let’s back up and make sure we’re all on the same page.What are breadcrumbs?What are breadcrumbs? Breadcrumbs are the “You Are Here” links you sometimes see at the top of a webpage. They might look something like this:

Home > About Us > Our Staff

In this example, you’re probably looking at the “Our Staff” page. It doesn’t matter how you got there; these links will appear the same. The site wants to let you know that “Our Team” is under the category “About Us,” which is all under the big picture of “Home,” and you can click those links if you want to get to those pages. This is an important distinction because “breadcrumbs” is actually a misnomer. It’s not about leaving a trail so you can go back the way you came (although that’s often how it works out). It’s actually about being able to easily navigate to broader categories for the webpage you’re currently visiting. But enough theorizing. Let’s talk about how this works.How Do Breadcrumbs Work with Javascript?This is where I was completely caught off guard. In order for Javascript code to be able to display breadcrumbs, it needs to be able to see the structure of your website as it relates to that page. What’s the easiest way to show the structure of your site on each webpage? Use the URL! (Duh! I really should have seen that one coming!)So, back to our example. If we want our breadcrumbs to look like this:

Home > About Us > Our Staff

We need our URL to look like this:

http://www.ourdomain.com/about_us/our_staff.html

The key is that the website needs to be organized in very specific folders that describe the categories. We define everything up to “.com” as “Home,” and then everything after that is named by folder and filename (or page title, as it turns out with this script). We tell the code to translate underscores as spaces, capitalize the first letter of each word, and take care of any other standard replacements we can see coming. The code takes care of the rest! Incidentally, if you want to see the “About Us” page, the URL could be this:

http://www.ourdomain.com/about_us/index.html

or this:

http://www.ourdomain.com/about_us.html

If “About Us” is a category for more things, it will make more sense to use to first one. Otherwise, the second will do. But these are just tips. Let’s get to the code.Javascript Breadcrumbs – The CodeI dug through the web and tried about 10 different versions of Javascript breadcrumbs code. This was the first code that actually worked well without glitches, and allowed for some good customization. I found it on a listserv discussion at the Louisiana Tech University website. I have no idea where this originated, except that Harry Love of the University of Washington is credited in the file.The code I’m using is rather long, so I’ll just post a link.