Click here to Skip to main content
13,346,966 members (69,946 online)
Click here to Skip to main content
Add your own
alternative version


96 bookmarked
Posted 22 Aug 2003

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.

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

GeneralRe: Can't display static text at end w/o it wrapping Pin
jopagri649-Feb-04 11:15
memberjopagri649-Feb-04 11:15 
QuestionWithout the ascx? Pin
Daniel Plomp4-Feb-04 23:43
sussDaniel Plomp4-Feb-04 23:43 
AnswerRe: Without the ascx? Pin
Jon Sagara5-Feb-04 20:12
memberJon Sagara5-Feb-04 20:12 
Generalone way for breadcrumbs... Pin
vbaddict2-Oct-03 6:13
membervbaddict2-Oct-03 6:13 
GeneralRe: one way for breadcrumbs... Pin
Jon Sagara2-Oct-03 10:42
memberJon Sagara2-Oct-03 10:42 
GeneralRe: one way for breadcrumbs... Pin
vbaddict3-Oct-03 7:21
membervbaddict3-Oct-03 7:21 
GeneralRe: one way for breadcrumbs... Pin
Michael Dausmann9-Nov-03 4:12
memberMichael Dausmann9-Nov-03 4:12 
GeneralRe: one way for breadcrumbs... Pin
BabuRao Gummadela31-Aug-09 22:20
groupBabuRao Gummadela31-Aug-09 22:20 
GeneralRe: one way for breadcrumbs... Pin
Anonymous6-Jan-04 5:00
sussAnonymous6-Jan-04 5:00 
GeneralRe: one way for breadcrumbs... Pin
kimjc015-Mar-04 11:29
susskimjc015-Mar-04 11:29 
GeneralRequest object Pin
gleizerowicz2-Oct-03 3:59
membergleizerowicz2-Oct-03 3:59 
GeneralRe: Request object Pin
Jon Sagara2-Oct-03 10:42
memberJon Sagara2-Oct-03 10:42 
GeneralNot working with UrlRewriting Pin
Lennybacon30-Sep-03 9:46
memberLennybacon30-Sep-03 9:46 
GeneralRe: Not working with UrlRewriting Pin
Jon Sagara30-Sep-03 9:52
memberJon Sagara30-Sep-03 9:52 
GeneralRe: Not working with UrlRewriting Pin
Lennybacon2-Oct-03 16:27
memberLennybacon2-Oct-03 16:27 
GeneralAlternative with XML Pin
Heath Stewart30-Sep-03 2:32
editorHeath Stewart30-Sep-03 2:32 
GeneralRe: Alternative with XML Pin
Jon Sagara30-Sep-03 8:11
memberJon Sagara30-Sep-03 8:11 
GeneralRe: Alternative with XML Pin
Heath Stewart30-Sep-03 9:31
editorHeath Stewart30-Sep-03 9:31 
GeneralRe: Alternative with XML Pin
veereswaraprasadg30-May-07 3:05
memberveereswaraprasadg30-May-07 3:05 
General*/index.aspx Pin
isunshine8-Sep-03 6:06
memberisunshine8-Sep-03 6:06 
GeneralRe: */index.aspx Pin
Jon Sagara8-Sep-03 12:27
memberJon Sagara8-Sep-03 12:27 
GeneralAlternative to &quot;include&quot; statement Pin
BJavierto25-Aug-03 18:13
memberBJavierto25-Aug-03 18:13 
GeneralRe: Alternative to &quot;include&quot; statement Pin
Jon Sagara25-Aug-03 19:43
memberJon Sagara25-Aug-03 19:43 
GeneralRe: Alternative to &quot;include&quot; statement Pin
Attila Hajdrik30-Aug-03 10:56
memberAttila Hajdrik30-Aug-03 10:56 
GeneralRe: Alternative to &quot;include&quot; statement Pin
Chris Maunder8-Sep-03 18:52
adminChris Maunder8-Sep-03 18:52 

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.

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