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:

<!--#include virtual="/cgi-bin/cookie_trail.cgi?title=You%20put%20your%20title%20here" -->

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:

?title=<a href="library.html"%20class="crumb">Building%20a%20library</a>%20->%20Current%20Reading%20List

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:

$html .= qq -&gt; <a href="$crumbs_path[$i]/" class="crumb">$crumbs[$i]</a>  ;

(you delete the class attribute and value).

Get the Code

Here it is