Introduction

Breadcrumbs or breadcrumb trails are a navigation technique used in user
interfaces. Its purpose is to give users a way to keep track of their location
within programs or documents. The term is taken from the trail of breadcrumbs
left by Hansel and Gretel in the popular fairytale.

Here is typical way breadcrumbs are used on web:

And of course Google also uses breadcrumbs:

Use of breadcrumbs is becoming widespread on the web, and has started to show
up in PC apps as well. Vista Windows Explorer uses breadcrumbs
to show where you are in file system:

Breadcrumb navigation seems particularly well-suited to any
kind of hierarchical system,
and serves two purposes: first, to show you where you are in hierarchy;
and second, to allow you to navigate to a previous point in hierarchy
in a random-access fashion - in other words, you do not have to keep hitting
back button, you can just click on second link and immediately
go to second location in breadcrumb trail.

While most studies of breadcrumb navigation have been focused entirely
on web sites (see references), there are many similarities
between navigating a web site and navigating a non-trivial PC app, especially
one that deals with hierarchical data - for example,
HR systems, auto parts ordering systems, and software for
presenting and selecting class schedules.
Jakob Nielsen, a user interface expert, has an interesting
blog about breadcrumbs.
If you replaced the words "web site" with "PC app" in his blog,
it would still make perfect sense.

Breadcrumb navigation seemed appropriate for a large
inventory system I was recently
involved with, and the client liked the idea when I presented it to him.
This led to the creation of XBreadCrumbBar, which is based on
XHtmlDraw.
This gives additional flexibility in the visual display of the breadcrumb
trail, and also offers built-in support for both web links and
APP: links (see my
XHtmlDraw
article for more details).

XBreadCrumbBar Features

Let me start by showing you the demo app:

Here are main features:

The No Links breadcrumb shows a static breadcrumb trail with no links.
The text is displayed using bold font, as is the separator.

The Web Links breadcrumb shows use of colors for links,
copied from my favorite book site. The last crumb is different color
and is not a link. Note that crumbs are bold, while separator
is not.

The APP: Links breadcrumb shows different colors for each link,
with cursor on first link. When link is clicked,
this is what you will see:

XBreadCrumbBar Implementation

The class CXBreadCrumbBar is derived from CXHtmlDraw,
which you can find described in
this article,
and embeds the link-handling class CXHtmlDrawLink,
also described in
CXHtmlDraw
article.

Step 4: Initialize APP: Commands

APP: hyperlinks allow you to display hyperlinked text that sends a
Windows message to a specified window when user clicks on it.
To use APP: hyperlinks, you must set up
APP: command table - here is table used
in the demo app:

This table has five entries, but you can add as many entries as you need.
Each entry has four elements: the first is the HWND of the
window that is to receive the message; the second is the numeric message
number that will be sent to the window via SendMessage(); the
third is user-defined data that is returned in the wParam member; and the
fourth is a string that ties the table entry to the HTML code.

After setting up this table, pass it to the CXBreadCrumbBarM
object by calling SetAppCommands():

Revision History

Version 1.0 - 2007 August 7

Initial public release

Usage

This software is released into the public domain. You are free to use it in
any way you like, except that you may not sell this source code. If you modify
it or extend it, please to consider posting new code here for everyone to share.
This software is provided "as is" with no expressed or implied warranty.
I accept no liability for any damage or loss of business that this software
may cause.

Share

About the Author

I attended St. Michael's College of the University of Toronto, with the intention of becoming a priest. A friend in the University's Computer Science Department got me interested in programming, and I have been hooked ever since.

Recently, I have moved to Los Angeles where I am doing consulting and development work.

For consulting and custom software development, please see www.hdsoft.org.

Comments and Discussions

First off this thing is great, thanks for making and sharing it, looks phenomenal in any application.

I noticed I was corrupting my heap when I tried using it dynamically to show the progression of searches in a program I was writing. I set the number of crumbs to 0 at certain points when users restart their search in order to erase the crumbs that no longer represent the results shown. This initiates the cleanup code deleting the m_crumbs array, but the SetCrumbs code for TCHAR arrays does not create a new instance of the array if 0 is reported as the number of crumbs! The next time the cleanup code is run the original pointer for the crumb array is still held by m_crumbs even though it has already been deleted before but not set to NULL. The cleanup code dutifully deletes that same address again which now contains who knows what in memory and the situation devolves from there. I think setting m_crumbs to NULL after deleting it should do the trick.

Yeah. I need this for a project. Unfortunately, there is none for C#. (except one from a private beta, but I'm not invited.) This one fits the bill, just take your custom controls out. (or port them) This looks realy good. (Darn ASP.NET guys, they have one, and desktop guys don't)