Skip to Local Navigation
Skip to Content
California State University, Long Beach


Javascript breadcrumbs

The original campus implementation of breadcrumbs depended on javascript to parse the page URL and create a string based on folder names. This was good for what it was, but it has two shortcomings: 1) crumb names were tied too closely to folder names, making it difficult to optimize the navigational value; and 2) it relied on javascript being enabled on the client side.

Perl breadcrumbs

To address these two shortcomings, we wrote a small perl script to generate the crumb trail in essentially the same way: take the URL, parse out the folder names and place a crumb for each folder. This script runs on the server, which avoids the reliance on javascript, and it refers to a config file which lets the webmaster override folder names in the dipslay.

how to use it

Place this include on your page:

<!--#include virtual="/divisions/af/dafweb/cgi-bin/" -->


Create a crumbs.config file and place it at the root of your site. If it isn't recognized, let me know.

This file has certain constraints and must follow a syntax:

  • it is a plain text file with world-read permissions
  • each directory gets its own line
  • each line must be tab separated with the directory from the server root on the left side and the new name for the crumb on the right.
  • To remove a directory from the breadcrumb trail, the right side should be either blank (e.g., "/some/path/\t\n") or contain the word "None" (e.g., "/some/path/\tNone\n"). The "None" option makes it a little easier to read, but they're functionally equivalent.
  • Comments can be added by starting the line with #

Here is a sample crumbs.config from the CMS site:

# breadcrumb configuration
/ CSULB Home
/divisions/ None
/divisions/af/ None
/divisions/af/cms/ CMS Home
/divisions/af/cms/end_user/ End Users
/divisions/af/cms/end_user/HR/ HR
/divisions/af/cms/end_user/FIS/ FIS
/divisions/af/cms/end_user/SA/ SA
/divisions/af/cms/about_cms/ About CMS
/divisions/af/cms/end_user/cslink/ CSLink

The following table shows how this configuration generates the given crumb trail for each URL:

URL Breadcrumb CSULB Home > CMS Home CSULB Home > CMS Home > End Users > FIS CSULB Home > CMS Home > About CMS > CSULB Home > CMS Home > End Users > CSLink

The "/divisions" and "/divisions/af/" parts of the url are suppressed from the breadcrumbs because both lines are set to "None" in the configuration. If "/" had also been set to "None", then the crumbs would start at "CMS Home" instead of also including "CSULB Home". This is how we tell the breadcrumbs about a site root other than the server root.

For the remaining directories, we match the whole path with our config. Notice that spaces and case are respected. HTML is also allowed (and in fact required), so use "&amp;" in the config to display "&" in your breadcrumbs.

If the URL ends in "index.html" or "index.htm" or has no filename, the final breadcrumb is not linked. If it is something else, there is a link. See the About CMS url and crumb above.