Skip to page content or Skip to Accesskey List.


Main Page Content

Breadcrumbs For All

Rated 4.13 (Ratings: 6)

Want more?

  • More articles in Code
Picture of MartinB

Martin Burns

Member info

User since: 26 Apr 1999

Articles written: 143

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;

  2. Swap 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=&lt;a href=&quot;library.html&quot;%20class=&quot;crumb&quot;&gt;Building%20a%20library&lt;/a&gt;%20-&gt;%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

Martin Burns has been doing this stuff since Netscape 1.0 days. Starting with the communication ends that online media support, he moved back through design, HTML and server-side code. Then he got into running the whole show. These days he's working for these people as a Project Manager, and still thinks (nearly 6 years on) it's a hell of a lot better than working for a dot-com. In his Copious Free Time™, he helps out running a Cloth Nappies online store.

Amongst his favourite things is ZopeDrupal, which he uses to run his personal site. He's starting to (re)gain a sneaking regard for ECMAscript since the arrival of unobtrusive scripting.

He's been a member of since the very early days, a board member, a president, a writer and even contributed a modest amount of template code for the current site. Above all, he likes to do things because it knowingly chooses to do so, rather than randomly stumbling into them. He's also one of the boys and girls who beervolts in the UK, although the arrival of small children in his life have knocked the frequency for 6.

Most likely to ask: Why would a client pay you to do that?

Least likely to ask: Why isn't that navigation frame in Flash?

The access keys for this page are: ALT (Control on a Mac) plus: is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.