• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Simplicity Rules

Adam DuVander on keeping it simple

  • About Adam

Dynamic Breadcrumb Navigation with JavaScript

January 3, 2006 by Adam DuVander

A little before the new year, my latest Webmonkey article went live.

Dynamic Breadcrumb Navigation with JavaScript

Comments

  1. Mike Robinson says

    June 10, 2006 at 7:40 am

    So, you do read these annoying emails. Heck, I’m suprised you even receive them.
    Well as long as you’re here, do you mind reading a bit further?

    Thank you first of all for a script that I can mostly understand. Now having said that, I’m a bit unsure of a few snippets.
    My version of breadnav.js (i.e., filenames, variables) has been cut and pasted AS IS from your lesson. I have only edited those portions that you have refered to.

    8 var crumbsep = ” >> “;
    // The separator does not display on webpage. What displays is: Home Recruit Training, rather than, Home >> Recruit Training

    12 var rootpath = “/newpi”; // Use “/” for root of domain.
    // This is OK
    13 var rootname = “Home”;
    // So is this

    18 objurl[‘pi_training’] = ‘Recruit Training’;
    //The url sub-directory (pi_training) displays variable name correctly, and as a hyperlink. However, as there is no ‘index.htm’ in that sub-directory, and clicking it results in a “HTTP Error 403” I have no need to display any directory as a link. I do need to display specified pageurls as hyperlinked variable names.

    20 // Grab the page’s url and break it up into directory pieces
    //So, do I need to edit the var pageurl section at all? Do I need to specify EVERY pageurl variable?

    Thank you for your time.

    Reply
  2. Mike Robinson says

    June 10, 2006 at 7:52 am

    You might want to take a look at where I am testing your script and its result:
    http://www.mcrdpi.usmc.mil/newpi/pi_training/about01.htm

    Here are my js edits thus far:

    var crumbsep = ” > “;
    var precrumb = “”;
    var postcrumb = “”;
    var sectionsep = “/”;
    var rootpath = “/newpi”; // Use “/” for root of domain.
    var rootname = “Home”;

    var ucfirst = 1; // if set to 1, makes “directory” default to “Directory”

    var objurl = new Object;
    objurl[‘pi_training’] = ‘Recruit Training’;

    Reply
  3. Shaf says

    September 18, 2006 at 10:34 am

    Mr. DuVander,

    http://duvinci.com/projects/javascript/crumbs/

    http://webmonkey.com/webmonkey/05/52/index0a.html

    Thanks for this bit of code. I have encountered a bug that you may know. Apparently any case difference with the folder name in the URL location makes the script malfunction. For example Actual URL: http://www.webmonkey.com/levelOne/levelTwo. Entering: http://www.webmonkey.com/levelone/leveltwo disables the script. Do you have any solutions that can ignore the case sensitive URLS?

    Thanks.

    Shaf

    Reply
  4. Adam says

    September 23, 2006 at 3:24 pm

    Mike–

    We emailed about this, right?

    Shaf–

    I think you’ll want to make your pageurl variable lower case. So, after this line:
    var pageurl = (new String(document.location));

    I’d recommend adding this line:
    pageurl = pageurl.toLowerCase();

    Reply
  5. Troy says

    May 4, 2007 at 12:34 pm

    Hi, thank you for the webmonkey article on breadcrumbs. I’ve been playin with your script and trying to make it work for me. One thing I was wondering is if it is possible to configure the script so that it doesn’t list the directory link for index.htm pages.

    I am trying to set up things so that it shows the breadcrumb trail just above the page title in the page nameplate and it works great except on index pages where I end up with the page title appearing twice since the folder/section name and page title are the same.

    Any suggestions on how to fix things so that it doesn’t list the derectory above for index.htm pages?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Simplicity Series

  • Designing the Obvious
  • Paradox of Choice
  • Laws of Simplicity

Copyright © 2025 · Elevate on Genesis Framework · WordPress · Log in