The Breadcrumb Trail

A breadcrumb trail acts as a navigational aid to the user. It is a list of links displayed on the page which allows users to gain a sense of where they are within the hierarchy of a site. Users can click up to a higher level in the site or back to the home page via the "breadcrumb". The breadcrumb trail can be seen on every page of the central UCL website, its starting point is positioned just below the logo in the top left hand corner.

How it works

The breadcrumb trail on UCL Online is a JavaScript file called CreateTrail.js. It works by reading the folder structure in the URL e.g. www.ucl.ac.uk/WebForum/, and printing it out with links to the relevant folder the top of the page. The javascript has a number of features built into it:

• It reads the folder structure represented in the URL and prints it out
• It strips out the extraneous characters in the URL. Thus in this website, the first 21 characters http://www.ucl.ac.uk are removed
• It inserts a default link to the UCL home page as the first item in the breadcrumb
• It inserts a divider ( ›› ) between each item
• It inserts a hypertext link into each item in the trail except the last item which remains text so as to inform the user as to where they are
• When reading the name of the folder it capitalises the first letter. Thus for example, a folder called "guidelines" becomes "Guidelines" in the Breadcrumb Trail. It also removes any hyphens it comes across in a named folder thus for example a folder called "undergraduate-study" becomes "Undergraduate Study"
• The feature for printing out the folder name can be overridden so as to avoid overly long folder names. Thus the folder called "prospective-students" becomes "Information for Prospective Students" (therefore the folder does not need to be named "information-for-prospective-students"

Downloading the Breadcrumb Trail

The breadcrumb trail is referenced in each template and will work if. folders are named and nested correctly. If you wish to download a copy of the JavaScript for further examination, click on this link

Overriding the Default Folder Naming Scheme

You can add your own exception to the naming process of the Breadcrumb Trail while still being able to use the centrally maintained copy of CreateTrail.js.

This can be done by replacing the following code in the body of your HTML:

<script language="JavaScript" type="text/javascript">CreateTrail();</script>

With:

<script language="JavaScript" type="text/javascript">
namechange = {"folder-name":"Text you wish to be in the bread crumb",
"another-folder":"Some more text"};
CreateTrail();
</script>

Note that each breadcrumb switch is separated by a comma.

In the example given below a folder named "uwu" becomes "University College London Web Unit":

<script language="JavaScript" type="text/javascript">
namechange = {"uwu":"University College London Web Unit"};
CreateTrail();
</script>

A Server-Side Solution

Some users may prefer a server-side script (written in PHP) rather than the client-side script (in JavaScript). The PHP version of the breadcrumb trail can be downloaded here. Users will need to rename it as a PHP file. Many thanks to Dan Stowell, Life Sciences FISO for translating the original script.