The University of Mississippi
Research and Sponsored Programs
Updated April 4th, 2006: Corrected issue that prevented script from working in root directories of websites.
Astute users of the ORSP website will have noticed the subtle changes made recently. One of those changes includes the addition of a “bread crumb” navigation bar. If you haven’t noticed, then look at the brown strip across the top of the page. It should read, “Home > News & Publications > ORSP IT > Bread Crumb How-To”. If you do not see this text, then most likely you have Javascript disabled. Each of the sections of the text are links to various levels back down the trail it takes you to get from the front page to this page. Some of you may be saying “But aren’t we supposed to stay away from Javascript for accessibility purposes?” Absolutely. However this feature of the website is really more of a convenience than anything else and its presence or absence doesn’t affect the page’s navigation. In short, don’t rely upon Javascript, but feel free to use it to augment navigation.
This particular setup utilizes Javascript (Google Definition for Javascript) and the DOM (W3C DOM introduction). If you are unsure what those technologies are, do not fear, you need very little knowledge of them to use this tutorial. Basically, these two technologies are different names for the same thing (to the average user). It will suffice to say that this page uses Javascript to break up the URI into sections (the URI being another term for URL, or web address) and DOM to create the individual links for each.
When the browser first loads, it comes across the script BreadCrumbs.js. This script automatically runs and looks for an HTML element named "BreadCrumbBar". When it “finds” this element, it breaks the URI into each directory and the current page. The URI for this page is “http://www.olemiss.edu/depts/research/publications/orspit/breadcrumb_howto/index.html”. When the script breaks it up, it ignores the first part (“http://www.olemiss.edu/depts/”) and breaks the rest of the address up using the “/”. The pieces are then, “research”, “publications”, “orspit”, “breadcrumb_howto”, and “index.html” Using each piece, it then creates a new HTML link element for that piece and adds it to the bread crumb bar. It automatically capitalizes each piece. However for some special links, I have provided a list of labels for the sections of the URI so that they will look better or be capitalized properly. The script will look for those special labels and will use them instead when available. We'll look into that portion of the script in more detail later. Once finished with all the pieces of the URI, the script is finished.
It is extremely easy to use this script with your site. First you will need to download the BreadCrumbs.js file. Once you have downloaded the file, open it in your favorite HTML editor (DreamWeaver, Notepad, etc.) and change the site prefix to what is most appropriate for your website. If your website is “http://www.yourdomain.com” you could set the prefix to be “http://www.yourdomain.com” or simply “/”. (If you don’t understand why, you could search for “absolute links”.) If your website is “http://www.website.com/~username/”, then you could use “/~username/”. Second, you’ll need to setup any special labels that you know you will want. This can be done generically for all files of a given name, or specifically for a particular file. If you use really clear and concise names for your html files, however, you probably won’t need labels. To add a label, you should add a line that looks like “breadCrumbLabels["filename.html"] = "The Pretty Label";”, where you change “filename.html” to the name of the file that you would like to label and “The Pretty Label” to whatever you want to label those pages. On our site, all “staff.html” files are labeled “Staff List”. To add a specific label, you use the same template as the generic label, but you change “filename.html” to be the path of the file you want to change, including your site prefix. Our labels section looks like this (except it has many more labels):
// BreadCrumb configuration // set up the site prefix var sitePrefix = "/depts/"; // set up the bread crumb separator text var breadCrumbSeparator = " > "; // set up our list of crumb items var breadCrumbLabels = new Array(); // generic labels breadCrumbLabels["staff.html"] = "Staff List"; // specific labels breadCrumbLabels["/depts/research/"] = "Home"; breadCrumbLabels["/depts/research/centers/"] = "Research Centers"; breadCrumbLabels["/depts/research/chancellor.html"] = "VCRSP";
Once you have finished setting up your labels, upload this file to your website.
The next step is to add the bread crumb bar to your page design. This can be really time consuming if your site has a lot of pages and you do not use a template system. Thankfully, our site has a common template file that all of our pages already use, so we just added the bread crumb bar there. Regardless of how you have to add the bar, you need to make sure that it is given the id “BreadCrumbBar”. For our site I chose to use a div tag, but you could use a table cell, a paragraph, pretty much anything if you know how to modify the Javascript. Here is what I added to our site:
<div id="BreadCrumbBar"></div>After adding the breadcrumb bar you will also need to add the script tag to use the Javascript file. You normally will put this in the HTML head section, but I placed it at the bottom of our template file becase that was the easiest place. Your tag should look something like this, with an appropriate link to where you uploaded the Javascript file:
<script type="text/javascript" language="javascript1.5" src="/depts/research/includes/BreadCrumbs.js"></script>Finally, stylize your bread crumb bar using the id selector “#BreadCrumbBar” for the bar itself and the class selector “.breadCrumb”. Using these two selectors in your CSS will provide you a lot of room for customizing the look of your bread crumb bar. If you are comfortable with Javascript, there are additional customizations you could make in the directly in the BreadCrumbs.js file. The styles for our bread crumb bar look like this:
#BreadCrumbBar
{
margin-top: 7px;
margin-right: 10px;
font-size: .75em;
color: #FFFFFF;
text-shadow: #000000 2px 2px 2px;
background-color: #34251F;
}
#BreadCrumbBar
{
float: left;
margin-left: 15px;
}
.breadCrumb
{
display: inline;
}Try it out. If a page doesn’t look labeled properly, then try adding a label for it. If you have any questions, please contact Errol Sayre with the Office of Research and Sponsored Programs via email.