JavaScript Breadcrumb Links

By Nate Baldwin, www.mindpalette.com

This tutorial and script will use JavaScript to read where your page is in the site folder structure and build back links to the pages higher up in the hierarchy. If you're trying to add breadcrumb links to PHP pages, you might try our PHP breadcumb links script instead.

Here's an example of the script output for this page with the default settings (CSS styling added):

Installation

Download the .zip archive of the script from here:

Decompress the .zip archive and add the MPBackLinks.js file to your site (you can usually put JavaScript files anywhere you want within your site structure).

Customizing Script Variables (optional)

There are a few variables near the top of the MPBackLinks.js file that you can also customize to better control the appearance and behavior. The following customization options (found at the top of the script) are all optional:

var homePage = "HOME";
This variable determines what the home page, or the root directory, of your site is named. The default is "HOME". If you'd like to use the address of your site (www.yoursite.com), you can just leave that value blank (nothing between the double quotes).
var sepChars = " > ";
This variable controls the character(s) that the script places between the link levels. The default (and for the example above) is set to be the > (greater than) HTML entity with a space on either side. Change this to whatever you want, but if the character has an HTML entity, be sure to use that. For instance, enter > instead of just >.
var linkHome = "/";
In most cases, this value should just be a / sign. Or, you can use the fully qualified http://www.yoursite.com address if you'd rather. Basically, it just tells the script what all the link addresses will start with.
var hideIndex = true;
Leave this value to true if you want the script to not list your index page name (index.html) at the end of the links path. The values true or false should be used, not inside quotes.
var UToSpace = true;
Leave this value to true if you want the script to convert any underscores in directory or names to spaces. For instance, it would convert "golive_actions" to "golive actions". The values true or false should be used, not inside quotes.
var DToSpace = true;
Leave this value to true if you want the script to convert any dashes in directory or page names to spaces. For instance, it would convert "golive-actions" to "golive actions". The values true or false should be used, not inside quotes.
var changeCaps = 0;
This variable lets you change the capitalization of the directory and pages names in your menu. The value should be a number (0 - 3), and not inside quotation marks. Options are as follows:
  • 0 - no change
  • 1 - initial caps
  • 2 - all upper case
  • 3 - all lower case
var hideExt = true;
If set to true, this variable will not display the file's extension for any file names displayed in the menu. Otherwise, set to false to show extensions.

Using the Script in GoLive

If you're using Adobe GoLive, see the following instructions for using the script on your page. If not, skip to the "Using the Script in HTML" heading below.

First, add the MPBackLinks.js file into your GoLive site (any folder will do).

To have the script print the back links into your page, add a JavaScript object from the Basic Objects tab of the Objects Palette into your page, wherever you'd like the menu to appear. Then, select your new JavaScript object and click the "source" box in the Inspector. Use the point-and-shoot tool to link the Source field to your copy of the MPBackLinks.js file.

Finally, upload both the MPBackLinks.js file and your page to your web server and test. You can link multiple pages to the same MPBackLinks.js file.

Using the Script in HTML (not GoLive)

If you aren'tusing GoLive, you can still use this script in your page. Simply go into source code view of whatever HTML editor you're using and paste in the following code wherever you'd like the back link menu to appear...

<script type="text/javascript" src="MPBackLinks.js"></script>

...but change the "src" path (between th quotes) to be the relative path from your page to the MPBackLinks.js file.

Finally, upload both the MPBackLinks.js file and your page to your web server and test. You can link multiple pages to the same MPBackLinks.js file.

Customizing Menu Appearance

You can customize the styling of your menu using CSS. The menu is created inside a <div> with a class assigned named "mp_backlinks". You can create a new CSS class sytle named "mp_backlinks" and assign whatever style settings you want. If you're using GoLive, you can use the CSS Editor in GoLive to create the new class style and assign properties without having to write your own CSS code (similar features are also available in most other HTML editors).

[ back to top ]

MindPalette web development and creative services, Indianapolis, IN