Skip to page content or Skip to Accesskey List.


Main Page Content

Breadcrumbs In Javascript

Rated 3.68 (Ratings: 6)

Want more?

  • More articles in Code
Picture of stormy

Justin Whitford

Member info

User since: 04 Sep 2001

Articles written: 2

Those unfamiliar with the breadcrumb navigation concept should read MartinB's article, Breadcrumbs for All, a great tutorial if you're using SSI. ASP people should read Aardvark's Breadcrumbs for Those Using ASP and jstetser has written a nice PHP tutorial entitled Breadcrumbs for PHP Lovers.

Why Javascript?

Because I can. I know that being a client-side technology Javascript is bound to be less of a reliable tool than a server-side script that produces uncontroversial HTML, but it will work for 95% or more of internet users and, frankly, not everyone has server-side tools available to them.

All we're going to do here is grab the URL and cutting off the 1st 8 chars (allowing for http:// and https://). We then grab the next chunk up to a "/" and discard that (the domain name). Now, we grab all the remaining chunks between the "/" characters and build the html string with them.

To use it, stick the function between your HEAD tags (or in a .js file) and then call it where you want the breadcrumbs to appear with <script>breadcrumbs()</script>.

[Ed note: The following script will not degrade gracefully in pre-4.x browsers. Users of Javascript 1.0 and 1.1 will not see the navigation used below. Instead, they will encounter JavaScript errors. However, this script is a good basis for accomplishing a breadcrumb navigation with Javascript on any site.]

<script language="JavaScript" type="text/javascript">


function breadcrumbs(){

sURL = new String;

bits = new Object;

var x = 0;

var stop = 0;

var output = "<A HREF=\"/\">Home</A> ";

sURL = location.href;

sURL = sURL.slice(8,sURL.length);

chunkStart = sURL.indexOf("/");

sURL = sURL.slice(chunkStart+1,sURL.length)


chunkStart = sURL.indexOf("/");

if (chunkStart != -1){

bits[x] = sURL.slice(0,chunkStart)

sURL = sURL.slice(chunkStart+1,sURL.length);


stop = 1;




for(var i in bits){

output += "<A HREF=\"";


output += "../";


output += bits[i] + "/\">" + bits[i] + "</A> ";


document.write(output + document.title);


// -->


A self proclaimed web monkey, Justin is a 'Jack of all trades' when it comes to web design & coding. Justin's hobby became a career when he was offered a junior web design position whilst chatting in an IRC channel. Having recently dropped out of a teaching degree , he eagerly accepted the job.

Justin's natural curiosity and his hunger for knowledge have seen him play/work with such technologies as HTML, XML, VRML, CSS, JavaScript, Flash, Perl, ASP, Java, JSP and PHP. Get him interested in a problem and he'll happily set about solving it using whatever tools and technologies are available.

Although preferring coding over design, Justin is comfortable with graphics/multimedia packages as varied as Adobe Photoshop(v5/6), Micrographix Picture Publisher(v5), Macromedia Fireworks(v4/5), and Flash(v4/5). The open source package, "the GiMP", is the latest to capture his attention.

Justin currently lives in Sydney, Australia.

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.