Click here to Skip to main content
Click here to Skip to main content

Breadcrumbs in ASP.NET

, 24 Sep 2003
Rate this:
Please Sign up or sign in to vote.
This article describes how to create breadcrumb navigation for your web site, based on its directory structure.
Prize winner in Competition "ASP.NET Jul 2003"

Breadcrumbs without file name appended

Breadcrumbs without file name appended

Breadcrumbs with file name appended

Breadcrumbs with file name appended

Introduction

Many popular web sites have a navigational menu near the top of each page so that the user can easily trace his or her steps back through the site. The menu usually looks something like the following (note that these links are inactive):

Home > Products > eWidge

This type of navigation has been named "Breadcrumb" navigation because it is analogous to dropping a trail of breadcrumbs while hiking into the woods, so that you can find your way back out again.

In Version 2, I have converted the script into a custom control.

This article assumes that you have a working knowledge of ASP.NET. To use this control, you must have the ability and knowledge to compile a simple C# script.

Background

I have started to try to learn ASP.NET several times now, but I keep getting sidetracked by my day job. I tackled this little project so that I could continue to learn more about ASP.NET. Since I am just getting started, I would really appreciate feedback on my code: Am I doing anything glaringly wrong? How can I make the script better? Is this code snippet useful to you?

How the code works

Assume we have a web site with the following directory structure:

/
/subdir/
/subdir/subsubdir/

Creating a breadcrumb navigation menu is as simple as extracting the directory names from the path of the current page and substituting the corresponding "friendly" names. (By "friendly" I mean a more human-readable, user-friendly form, so instead of seeing the directory name subdir, you would see the friendly name Sub Directory.) So if we were viewing the page /subdir/subsubdir/Default.aspx, our menu would look like this:

Home > Sub Directory > Sub Sub Directory > Default.aspx

This assumes, we assigned Sub Directory to subdir and Sub Sub Directory to subsubdir. It also assumes that the user has chosen to display the file name at the end of the breadcrumb trail.

During the control's load event, which is handled by the Control_Load event handler, the hyperlinks to each section are generated by appending each directory name to the web site's root URL, in succession.

Finally, after the file's path is parsed and the breadcrumbs are created, the resulting HTML is sent to the browser during the Render method via the HtmlTextWriter object.

Assigning friendly names is addressed in the next section.

Using the code

You will need to modify the directory names and "friendly" names in the HybridDictionary object named labels, located in the BreadCrumbControl constructor. You will need to change them to match the directory structure of your web site.

labels.Add ("subdir", "Sub Directory");
labels.Add ("subsubdir", "Sub Sub Directory");

Whenever you add a new directory to your web site, you must add an entry for it and then recompile the control. If you do not, the page will contain an incomplete breadcrumb trail.

If you have multiple directories with the same name (e.g., images), you only need to make one entry for that directory name.

I elected not to use Visual Studio to create this first version of the control. To compile the code, you may use a command line similar to the following:

csc /out:BreadCrumbs.dll /target:library BreadCrumbs.cs

After successful compilation, place BreadCrumbs.dll in the \bin directory of the web site's root directory.

To use the code, place the following Register directive at the top of your ASP.NET page:

<%@ Register TagPrefix="Sagara" Namespace="Sagara.BreadCrumbs" 
                                            Assembly="BreadCrumbs" %>

To display the breadcrumb control, place a custom control tag in the body of the page where you want the breadcrumbs to appear:

<Sagara:BreadCrumbControl id="breadcrumb" runat="Server" />

You may want to modify one or more of the four public properties to customize the look of the control. These properties have the following functions:

Variable Function
bool ShowFileName If true, show file name and separator (e.g.: Home > Sub Directory > Default.aspx). If false, don't show file name or separator (e.g.: Home > Sub Directory). Default value is false.
string RootName Contains the "friendly" name of the web site's root directory. Default value is Home
string RootUrl Contains the URL of the web site's root directory. Default value is /.
string Separator The HTML character used to separate the "friendly" directory names in the breadcrumb HTML. Default value is >.

For example, to change the separator character to :, you would change the control's tag to the following:

<Sagara:BreadCrumbControl id="breadcrumb" Separator=":" runat="Server" />

Alternatively, you may modify these properties in the code-behind file prior to compilation.

To-do list

  • Per user suggestion, I am investigating the possibility of incorporating data binding into this control.

Conclusion

That's it! As you can see, breadcrumb navigation is very simple in concept and implementation.

If you have any questions, please leave them on the message boards below, and I will respond as soon as possible!

History

  • 1.0.0 - 23 Aug 2003

    Initial public release.

  • 2.0.0 - 23 Sep 2003

    Converted script into a custom control.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Jon Sagara
Software Developer (Senior) Sagara Software, Inc.
United States United States
Jon graduated from Cal Poly with a B.S. Computer Engineering. He is currently building a Silverlight-based report scheduling interface for a pharmaceutical reporting company.
 
When he's not fooling around with computers or reading, he's busy spending time with his super wife, Kelly, his two boys, and their rambunctious dog, Homer.
 
Visit my blog
 
---
 
View my old profile pictures
Follow on   Twitter

Comments and Discussions

 
QuestionMy vote of 5 !! PinmemberSanjay_00722-Dec-11 1:28 
GeneralNot working PinmemberNagarjuna M20-Apr-11 2:27 
GeneralMy vote of 5 Pinmembermohanudupa14-Feb-11 16:55 
GeneralFile or assembly name BreadCrumbs, or one of its dependencies, was not found PinmemberLori Tompkins6-May-05 13:00 
GeneralRe: File or assembly name BreadCrumbs, or one of its dependencies, was not found PinmemberJon Sagara6-May-05 13:34 
I wrote this control outside of Visual Studio so that people who don't have VS could still easily use it. If you want a quick fix, edit the source file directly and then use the command line instruction in the file's comment header to compile with csc.exe. Drop the resulting file into the \bin directory. To be completely honest with you, I have never tried using this from within VS.
 
What is the assembly name of your new project that you created? Given the ASP.NET Page and Register directives above, it is looking for an assembly named "BreadCrumbs.dll" in the \bin directory. If you modified the namespace(s) or the assembly name, you'll need to modify the Register directive at the top of Lori1.aspx to reflect the new names.
 

Jon Sagara
I said NO salt, NO salt on my margarita!!

My Articles

GeneralCan't change font size PinsussAnonymous7-Feb-05 2:04 
GeneralRe: Can't change font size PinmemberJon Sagara7-Feb-05 4:34 
GeneralCan't display static text at end w/o it wrapping Pinmemberjopagri649-Feb-04 6:09 
GeneralRe: Can't display static text at end w/o it wrapping PinmemberJon Sagara9-Feb-04 9:28 
GeneralRe: Can't display static text at end w/o it wrapping Pinmemberjopagri649-Feb-04 10:10 
GeneralRe: Can't display static text at end w/o it wrapping Pinmemberjopagri649-Feb-04 10:15 
QuestionWithout the ascx? PinsussDaniel Plomp4-Feb-04 22:43 
AnswerRe: Without the ascx? PinmemberJon Sagara5-Feb-04 19:12 
Generalone way for breadcrumbs... Pinmembervbaddict2-Oct-03 5:13 
GeneralRe: one way for breadcrumbs... PinmemberJon Sagara2-Oct-03 9:42 
GeneralRe: one way for breadcrumbs... Pinmembervbaddict3-Oct-03 6:21 
GeneralRe: one way for breadcrumbs... PinmemberMichael Dausmann9-Nov-03 3:12 
GeneralRe: one way for breadcrumbs... PingroupBabuRao Gummadela31-Aug-09 21:20 
GeneralRe: one way for breadcrumbs... PinsussAnonymous6-Jan-04 4:00 
GeneralRe: one way for breadcrumbs... Pinsusskimjc015-Mar-04 10:29 
GeneralRequest object Pinmembergleizerowicz2-Oct-03 2:59 
GeneralRe: Request object PinmemberJon Sagara2-Oct-03 9:42 
GeneralNot working with UrlRewriting PinmemberLennybacon30-Sep-03 8:46 
GeneralRe: Not working with UrlRewriting PinmemberJon Sagara30-Sep-03 8:52 
GeneralRe: Not working with UrlRewriting PinmemberLennybacon2-Oct-03 15:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 25 Sep 2003
Article Copyright 2003 by Jon Sagara
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid