Click here to Skip to main content
12,698,600 members (30,695 online)
Click here to Skip to main content
Add your own
alternative version


96 bookmarked

Breadcrumbs in ASP.NET

, 24 Sep 2003 CPOL
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.

Breadcrumbs without file name appended

Breadcrumbs without file name appended

Breadcrumbs with file name appended

Breadcrumbs with file name appended


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.


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:


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:

bool ShowFileNameIf 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 RootNameContains the "friendly" name of the web site's root directory. Default value is Home
string RootUrlContains the URL of the web site's root directory. Default value is /.
string SeparatorThe 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.


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!


  • 1.0.0 - 23 Aug 2003

    Initial public release.

  • 2.0.0 - 23 Sep 2003

    Converted script into a custom control.


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 is a senior software developer who loves solving problems with the .NET framework.

When he's not fooling around with computers or reading, he's busy spending time with his super wife, Kelly, and his three boys. He also likes to take his mountain bike for a spin.

Visit my blog

You may also be interested in...

Comments and Discussions

QuestionMy vote of 5 !! Pin
Sanjay_00722-Dec-11 2:28
memberSanjay_00722-Dec-11 2:28 
GeneralNot working Pin
Nagarjuna M20-Apr-11 3:27
memberNagarjuna M20-Apr-11 3:27 
GeneralMy vote of 5 Pin
mohanudupa14-Feb-11 17:55
membermohanudupa14-Feb-11 17:55 
GeneralFile or assembly name BreadCrumbs, or one of its dependencies, was not found Pin
Lori Tompkins6-May-05 14:00
memberLori Tompkins6-May-05 14:00 
GeneralRe: File or assembly name BreadCrumbs, or one of its dependencies, was not found Pin
Jon Sagara6-May-05 14:34
memberJon Sagara6-May-05 14:34 
GeneralCan't change font size Pin
Anonymous7-Feb-05 3:04
sussAnonymous7-Feb-05 3:04 
GeneralRe: Can't change font size Pin
Jon Sagara7-Feb-05 5:34
memberJon Sagara7-Feb-05 5:34 
GeneralCan't display static text at end w/o it wrapping Pin
jopagri649-Feb-04 7:09
memberjopagri649-Feb-04 7:09 
GeneralRe: Can't display static text at end w/o it wrapping Pin
Jon Sagara9-Feb-04 10:28
memberJon Sagara9-Feb-04 10:28 
jopagri64 wrote:
> Current Page Title Here

Just a guess, but try replacing that > with &gt;. Failing that, I'll need to see the HTML that makes up your page.

Jon Sagara
Vegetarianism is unhealthy. Humans need protein, and lots of it. Put down those sprouts and pick up a T-bone!
-- Michael Moore

Latest Article: Breadcrumbs in ASP.NET

GeneralRe: Can't display static text at end w/o it wrapping Pin
jopagri649-Feb-04 11:10
memberjopagri649-Feb-04 11:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.170118.1 | Last Updated 25 Sep 2003
Article Copyright 2003 by Jon Sagara
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid