Skip to page content or skip to Accesskey List.
Search evolt.org
evolt.org login: or register

Work

Main Page Content

Breadcrumbs for Those Using ASP

Rated 4.22 (Ratings: 6) (Add your rating)

Log in to add a comment
(26 comments so far)

Want more?

 
Picture of aardvark

Adrian Roselli

Member info | Full bio

User since: December 13, 1998

Last login: October 28, 2009

Articles written: 62

Instead of going through the usefulness of the breadcrumb navigation concept all over again, I'll just refer you to Martin's article, Breadcrumbs for All. It's a great tutorial for those of us with Perl and Unix/Apache servers, but it leaves out those of us using ASP on IIS. It also leaves out a few others, but I'm just doing ASP here, so cut me some slack.

You can see a sample of this code in action at the Kenan Center site (the Recreation section has the most depth right now). This site has only a few levels of directories, but it is still just as useful on that site as on extremely deep sites.

One thing to keep in mind is that you have to name directories in plain english (or your human-readable language of choice) since it uses the directory names for the breadcrumb. This function will capitalize the words in the directory names, and it replaces all underscores with spaces for display. It does not handle special characters, but then again, neither does the Windows file system (at least not extended characters). It's a simple matter of using a replace() function against a pre-defined list of characters to enable that, however.

The code should be created as an include file called breadcrumb.asp and stuffed into your general includes directory. The page that calls it should have a variable called PageTitle that is the name of the page. This variable is used by breadcrumb.asp (and if you're smart, the file calling it) to list the current page. If the variable is blank, however, it just uses the words "Current Page." It's also worth noting that this script goes right to the root of the site with its links, which may or may not be what you want.

<% '############################

'##############################################################################
'# breadcrumb.asp                  Version 1.0                                #
'# Copyright 2000 Adrian Roselli   adrian@roselli.org                         #
'# Created 24/4/2000               Last Modified 24/4/2000                    #
'##############################################################################
'# COPYRIGHT NOTICE                                                           #
'# Copyright [and -left] 2000 Adrian Roselli  All Rights Reserved except as   #
'# provided below.                                                            #
'#                                                                            #
'# breadcrumb.asp may be used and modified free of charge by anyone so long   #
'# as this copyright notice and the comments above remain intact. By using    #
'# this code you agree to indemnify Adrian Roselli from any liability that    #
'# might arise from it's use.                                                 #
'#                                                                            #
'# This script is released under the GPL.                                     #
'# Selling the code for this program or any derivative work is expressly      #
'# forbidden. A full copy of the GPL can be found in the Code section of      #
'# http://evolt.org. In all cases copyright and this header must remain       #
'# intact.                                                                    #
'##############################################################################


Function BreadCrumb(FullPath)

Do Until instr(1,FullPath,"/") = 0

	'## Create an array of letters in the alphabet.
	Letters = array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z")

	'## split on the /
	tmpPath = mid(FullPath,1,instr(1,FullPath,"/")-1)
	strTmpPath = Trim(tmpPath)
	DirPath = DirPath & strTmpPath & "/"

	'## upshift the first character
	firstLetter = ucase(mid(strTmpPath,1,1))
	strTmpPath = firstLetter & mid(strTmpPath,2,len(strTmpPath))

	'## replace udnerscores with spaces and upshift the following character
	for each letter in letters
		strTmpPath = Replace(Trim(strTmpPath),"_" & lcase(letter)," " & UCase(letter))
	next

	'## split the next one out	
	FullPath = mid(FullPath,instr(1,FullPath,"/")+1,Len(FullPath)-Len(tmpPath))

	'## separate them with >> symbols
	IF strTmpPath = "" THEN
		response.write "<a href=""/"" style=""text-decoration:none"">Home Page</a>"
	ELSEIF strTmpPath = "Home" THEN
	ELSE
		response.write " &gt; <a href=""" & DirPath & """ style=""text-decoration:none"">" & strTmpPath & "</a>"
	END IF
Loop

IF PageTitle = "" THEN
	response.write " : Current Page"
ELSE
	response.write " : " & PageTitle
END IF

End Function %>

To call this code in your page, you need to call the include file and (if you want) set the variable PageTitle as something. For example:

<% PageTitle = "About Us" %>
<!--#include virtual ="/includes/breadcrumb.asp"-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
                "http://www.w3.org/TR/REC-html40/loose.dtd">

<html lang="en-us">
<head>

<title><% = PageTitle %></title>
[...]

When you are ready to call the function on the page to display the breadcrumb trail, simply call it like this:

<% = BreadCrumb(Request.ServerVariables("PATH_INFO")) %>

The code can easily be tweaked, and some things changed or modified (like the Letters array, or setting the PATH_INFO server variable as a variable early in the script) depending on your needs. You can modify the HTML that displays the breadcrumb in the include file so it matches your site styles as well.

A founder of evolt.org, Adrian Roselli (aardvark) is the Senior Usability Engineer at Algonquin Studios, located in Buffalo, New York.

Adrian has years of experience in graphic design, web design and multimedia design, as well as extensive experience in internet commerce and interface design and usability. He has been developing for the World Wide Web since its inception, and working the design field since 1993. Adrian is a founding member, board member, and writer to evolt.org. In addition, Adrian sits on the Digital Media Advisory Committee for a local SUNY college and a local private college, as well as the board for a local charter school.

You can see his brand-spanking-new blog at http://adrianroselli.blogspot.com/ as well as his new web site to promote his writing and speaking at AdrianRoselli.com

Adrian authored the usability case study for evolt.org in Usability: The Site Speaks for Itself, published by glasshaus. He has written three chapters for the book Professional Web Graphics for Non Designers, also published by glasshaus. Adrian also managed to get a couple chapters written (and published) for The Web Professional's Handbook before glasshaus went under. They were really quite good. You should have bought more of the books.

And now for those of us using PHP...

Submitted by aardvark on December 31, 2000 - 11:26.

There's now a tutorial on the site using a PHP solution. You can see it at Breadcrumbs for PHP Lovers. Collect the whole set!

login or register to post comments

Similar Functionality in ColdFusion

Submitted by kwilson on January 1, 2001 - 13:16.

CFComet has a ColdFusion tag (CF_EasyNav) that appears to offer similar functionality. I've not used it myself but might be worth checking out for those with with CF-based sites. http://www.cfcomet.com/cfcomet/utilities/ Ken

login or register to post comments

Font for 'current page'

Submitted by DanO on April 7, 2001 - 23:57.

I have changed the font color and size in the two areas on the breadcrumbs.asp include, but don't know how to change the font for the PageTitle. I'm sure it can be done, any tips?

login or register to post comments

Style the container

Submitted by aardvark on April 8, 2001 - 07:19.

The breadcrumb function is designed to be called inside a set of <font> tags or within a styled container. So as an example, mixing <font> and classing, you could try this:

&lt;font face="arial,helvetica,sans-serif" size="1" class="breadcrumb"&gt; &lt;% = BreadCrumb(Request.ServerVariables("PATH_INFO")) %&gt;&lt;/font&gt;

You can contain it within styled <div>s, <td>s, or anything, really.

login or register to post comments

does it works with frames

Submitted by mikysm on September 19, 2001 - 13:46.

I'm developin' an app that display the bradcrumbs into the self page, but i want the breadcrumbs are into a different frame. is it possible???
Also i want that the bradcrumbs doesn´t display the name of the directory, i want the bradcrumbs display a symbolic name of that directory:
for example:
/ > Activity >> etc...

mikysm@latinmail.com [my english is not good, sorry]

login or register to post comments

Having breadcrumb display customized message

Submitted by shaunshull on October 24, 2001 - 11:28.

To actually have the breadcrumb display customized locations depending on which directory you are in I would suggest using some kind of external file (xml maybe) and having the asp replace any directories specified in that file. For example:


Or an array within the asp file would also work. All this can be processed during the parsing phase of the code.

login or register to post comments

An Alternative

Submitted by smock on November 21, 2001 - 12:26.

I really like this approach! However, I did end up having to roll my own version because I needed to not capitalize certain words like "an", "the", etc. Here's my alternative.

login or register to post comments

interesting alternative

Submitted by aardvark on November 21, 2001 - 12:53.

The way I've modified the one in this article is to use a replace function on certain words. Thing is, you can't just replace every instance of "An" with "an," since it may be the beginning of a word (so "Adam Ant" would become "Adam ant"). In order to ensure that these words are actually words and not parts of words, I look for a space on each side of the word, which also prevents me from grabbing the first word as well. So I'd look for " An " instead of "An." The code might look like Replace(strTmpPath," An "," an "). Is it the best solution? No, but it's a handy band-aid to get the new site up and running. It would, of course, be better worked into the capitalization part of the function instead of doing it after the fact.

login or register to post comments

Problems with Caps and &

Submitted by brucegm on December 3, 2001 - 07:09.

I have problems with the code when I have a CAPS section in the folder name (as in "lan_ID" where I want the ID to be caps). I get a similar error whith folders names like "policies_&_procedures" - it doesn't seem to like the &. Is there a work around for this?

login or register to post comments

Re: Problems with Caps and &

Submitted by aardvark on December 3, 2001 - 08:17.

You may wish to use the replace() idea I suggest above to handle for specific words that need to be in all-caps. As for the ampersand, I don't use that character in file names ever, so I never considered that an issue. You may have to use a replace() on that as well. If it doesn't mess with other links, you could rename the folder, too.

login or register to post comments

Back and Forward buttons?

Submitted by rfbriggs on October 20, 2003 - 12:18.

Has anyone had any problems with this when the user clicks Back or Forward? In other words, the server isn't accessed in between. I need a way to deal with this. Any ideas would be great. Thanks!

login or register to post comments

back/forward

Submitted by aardvark on October 20, 2003 - 12:52.

This script should work with back and forward buttons. It is not client-side script, so it doesn't mess with the browser history. Hitting back will still bring you back to the last page viewed.

login or register to post comments

Nice code but...

Submitted by monstor_mash2000 on April 30, 2004 - 00:34.

I have used this code but it what if you have a directory that just has pages like page_one.asp and doesn't actually contain a default.asp for that directory. Im wondering if I can use XML to determine if a HTTP 404 error occurs with a particular link before deciding to response.write it out to the client- anyone any experience in this? Paul. Web Designers Belfast

login or register to post comments

code not meant for sites without default files

Submitted by aardvark on April 30, 2004 - 04:56.

monster_mash200, this code isn't designed to accomodate sites that don't use a default file for each directory. Whether your server is configured to use default.asp or page_one.asp is a different story.

Given the number of people (like me) who hack through a site by chopping filenames off directories in order to manually move around the structure, I would argue that you should always include a default file in each content directory — even if it's only a redirect to some other related file. At that point, you're killing two birds with one stone, and you could have fewer 404 errors in your logs.

As for your suggested approach of using an XML file to determine a 404, I think you'd be overengineering a solution to the wrong problem. You might be better off just maintaining an array of directories with these exceptions in a constants file and do a comparison each time you render the breadcrumb. Less work, and less stress on the server (no need to invoke the XML object). Of course, I would skip this altogether and just put default files in each directory as I mentioned above.

login or register to post comments

Modification to Script needed please

Submitted by chuckie365 on October 14, 2004 - 16:01.

Hi, My site does not reside on the root directory but rather a subdirectory of the root. How do I remove the Home Page reference in the very beginning and start with my first page on the root since the home page brings back a 404 error?



'## separate them with >> symbols
IF strTmpPath = "" THEN
response.write "Home Page"
ELSEIF strTmpPath = "Home" THEN
ELSE
response.write " > " & strTmpPath
& "
" END IF
Loop
IF PageTitle = "" THEN
response.write " : Current Page"
ELSE
response.write " > " & PageTitle
END IF

Thanks.

login or register to post comments

Try a replace on the path

Submitted by aardvark on October 15, 2004 - 03:58.

Chuckie365, there are a few ways you can do, it depending on what works best for you. At a quick glance, I might start by running a replace on my Request.ServerVariables("PATH_INFO") string. Remove the parts of the string that go higher than the directory of your site root, and let the breadcrumb build off of that.

login or register to post comments

Breadcrumb ASP code

Submitted by chuckie365 on October 15, 2004 - 08:04.

Aardvark, Thanks for your quick reply. Unfortunately, i am rather new to ASP and just looking to make the site i'm working on easier to navigate. If you could provide me the actual modification to the code that I would need to do this, it would be highly appreciated. Once again the root directory does not have a link such as default.asp that returns a valid page so i need to jump ahead and use the first sub directory under the root as my home page. Thanks for any help you can provide :) Regards, Chuckie

login or register to post comments

Simpler?

Submitted by monstor_mash2000 on October 15, 2004 - 08:13.

Would the following not be a simpler solution stick a default.asp in your root. inside it
<?php
Response
.Redirect("/subdirectory/")
?>

login or register to post comments

sorry

Submitted by monstor_mash2000 on October 15, 2004 - 08:15.

sorry i tried some code it didn't appear - Response.Redirect("/subdirectory")

login or register to post comments

don't have access

Submitted by chuckie365 on October 15, 2004 - 08:54.

Monstor, Thanks for the idea but i don't have any control of the root directory. This is for a school website and i only have a subdirectory from the root to work with. Regards, Chuckie

login or register to post comments

Email me

Submitted by aardvark on October 15, 2004 - 09:45.

Chucki365, just email me the value of Request.ServerVariables("PATH_INFO"), and a URL of the page (if you have one), and we'll take this offline and work it out. You can use the email in profile.

login or register to post comments

breadcrumb alteration needed

Submitted by bruceg on January 24, 2005 - 06:11.

I have implemented the breadcrumbs script and would like to make an alteration. Not sure how to go about doing that since I am pretty much a newby to .asp. currently the script goes a bit too deep for me. For instance I have index.htm at the root level and parent folders for the main pages and within those folders are child pages the current breadcrumb script returns Home Page>>Site Name>>Parent Page>>Child Page basically I just want to take out one level so it will give me >>Home Page>>Parent Page>>Child Page. Not sure where to start and what needs changing. Any assistance is greatly appreciated! -Bruce

login or register to post comments

Run a replace

Submitted by aardvark on January 24, 2005 - 14:50.

Bruceg, you should be able to just run a replace on your path to remove the site name. For example, if the Request.ServerVariables("PATH_INFO") returns "site_name/parent_page/child_page," then you would replace it with something like this

Replace(Request.ServerVariables("PATH_INFO"),"site_name/","").

Your breadcrumb call will now look like this:

<% = BreadCrumb(Replace(Request.ServerVariables("PATH_INFO"),"site_name/","")) %>

login or register to post comments

re: run a replace

Submitted by bruceg on January 24, 2005 - 16:10.

thanks for the reply aardvark. I think some of your reply got cut off, though. I understand I need to replace
<?php
= BreadCrumb(Request.ServerVariables("PATH_INFO"))
?>
but I'm not sure with what exactly :-( -Bruce

login or register to post comments

index pages

Submitted by grackle on October 24, 2006 - 19:18.

I modified the end of this script so that it doesn't display the page name if it is the same as the parent directory name. Like so:
IF PageTitle = strTmpPath THEN
	response.write ""

ELSE

IF PageTitle = "" THEN
	response.write " : Current Page"

	ELSE
		response.write " : " & PageTitle

	END IF
END IF

login or register to post comments

Current page needs to be without hyperlink

Submitted by kullanici34 on September 29, 2007 - 12:14.

Hi there, Can you modify to display this breadcrumbs code to display like this:

Home > Search > Results > Details

First 3 of them with hyperlink but the last one I mean the current page without hyperlink. Basically I dont want users to click on te current page name, so it shouldnt be a link. On this great code which lines needs to be changed and how. Thanx code works perfectly except this little problem.

login or register to post comments

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.orgEvolt.org 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.