Within this article you will learn how to create breadcrumb navigation using ASP.NET and C#.
This article does assume that you have a working knowledge of ASP.NET and C#, but the code we use is commented for convenience.
By utilizing breadcrumb navigation you allow your viewers to easily trace their path taken to the current location and back track if necessary. A breadcrumb navigation usually looks something like:
In the above example we see that the viewer started on the â€™Home Pageâ€™, then moved to the â€˜Website Designâ€™ section, then selected the â€˜ASP.NET Breadcrumbs with C#’ page, where they currently reside.
In the above example, â€˜Home Pageâ€™ and â€˜Website Designâ€™ are hyperlinked to their respective locations allowing the user to quickly return to a previous location.
The usability guru is obviously pleased that the user can visually see where they are and how they got there, but the search engine optimizer should also be smiling at the fact that there is now additional links with keyword loaded anchor text pointing to their pages.
Letâ€™s take a closer look at the breadcrumb path and its makeup so we can see how itâ€™s derived and be better prepared to look at the code coming up.
Home Page > Website Design : ASP.NET Breadcrumbs with C#
The first part, â€˜Home Pageâ€™ is where the user is starting; typically something like â€˜Homeâ€™ or â€˜Home Pageâ€™ will be used. However, we will use a variable in our code so that the user may decide what text they would like to use. The next part â€˜Website Designâ€™ is a sub-category that holds the page that the user is currently viewing, â€˜ASP.NET Breadcrumbs with C#â€™. We know that this is the final resting spot because the â€˜:â€™ preceding the page name indicates so. Finally, the â€˜>â€™ is used as a separator for categories, this also is a variable, allowing for a choice of symbol.
Letâ€™s go ahead and walk through the code.