Breadcrumbs for All

Several sites now have a breadcrumb trail as a navigation aid. The appeal is obvious: help the user work out where they are in a hierarchical site. It's pretty good usability, which is probably why Jakob Nielsen has one on his site. Here's how to add one to your own (Unix/Apache/Perl-hosted) site.

This code works for simple hierarchical sites - ones where there is a simple tree structure. Below the home page, there are a set of folders, each of which can have layers of subfolders. Each folder can contain pages. In other words, your basic site.

The reason for this is that this is not a re-creation of the user's browser history; it's a visualisation of a top-to-bottom path through your information architecture.

The way it works is extremely simple:

1. Take a simple URL like
   http://foo.co.uk/articles/content/systems.html;
2. Swap http://foo.co.uk for Home as it's the home page of the site;
3. Swap systems.html for a sensible title (a truely gifted piece of code would pick this up from the page title with no performance loss. This is no such piece of code, sorry, it picks it up from a query string);
4. Split the rest of the URL at the slashes;
5. Add a link to all but the current page title;
6. Stick the bits together in order, using a sensible separator such as ->;
7. Output it all as a single string to the page.

This script does exactly that, with one other bit of cleverness - it capitalises the first letter of each bit, so that it appears more sensible to the non-technical than the lower case version which you'll probably be using in your URL schema.

There's also an additional extra which will only work if you're running on Perl5.004 or later. It will correctly capitalise non-English chars such as á, Þ, ö and ñ (the one unsupported exception appears to be ß). If this matters to you, and you are running Perl5.004 or later, then comment out the line:
use locale;

Also note:

You call the script by means of an SSI call:

<pre>&lt;!--#include virtual=&quot;/cgi-bin/cookie_trail.cgi?title=You%20put%20your%20title%20here&quot; --&gt;</pre>

and the (URL-encoded) query string sets the title;

The title can also have links in it as long as you escape all the HTML entities - useful if you want to have a sub-article without creating a subdirectory:

<pre>?title=&amp;lt;a href=&amp;quot;library.html&amp;quot;%20class=&amp;quot;crumb&amp;quot;&amp;gt;Building%20a%20library&amp;lt;/a&amp;gt;%20-&amp;gt;%20Current%20Reading%20List</pre>

My site has a special CSS class for the breadcrumb trail, so all the links output by the script will have class="crumb" in them. If you want them out, then this is the line to edit:

<pre>$html .= qq|-&amp;gt; &lt;a href=&quot;$crumbs_path[$i]/&quot; class=&quot;crumb&quot;&gt;$crumbs[$i]&lt;/a&gt; |;</pre>

(you delete the class attribute and value).

Get the Code

Here it is