The Breadcrumb Navigation Pattern

Article
10/15/2009

The Breadcrumb Navigation pattern provides a visual representation of the path the user took as they navigated to a particular state in an application. It provides context so the user can see where they are logically within the application structure, and it allows them to quickly navigate that structure by jumping straight to previous breadcrumbs.

Perhaps the most common example of the breadcrumb navigation pattern is Windows Explorer – as you navigate the file system, the breadcrumb control at the top of window displays the path to the current folder, with each folder in the chain displayed as a button. You can jump directly to any of the parent folders by clicking on it.

You often see the pattern used in web sites, especially ones where the user is navigating through a lot of hierarchical data. For example, a lot of ecommerce site allows the user to browse the product catalog by drilling into product categories and by specifying search criteria and filters. Here’s a good example from GuitarCenter.com – you can navigate around within the product catalog by product category and filter the view by price or manufacturer.

This post describes how you can implement the breadcrumb navigation pattern in Helix, my prototype navigation framework for Silverlight. You can download the latest version of Helix from here, and run the sample described below here.

The BreadcrumbBar Control

Implementing the Breadcrumb Navigation pattern in Helix turned out to be quite straightforward. The main element is the BreadcrumbBar control. This control displays the breadcrumbs as the user navigates within an associated Frame. The user can click on any of the breadcrumbs causing the associated Frame to navigate back to the corresponding point in the navigation history.

The BreadcrumbBar control is actually a sub-classed and re-templated ListBox control that is bound to the target Frame's journal. As the user navigates between Pages in the target Frame, journal entries are added to the journal. Each journal entry is represented in the BreadcrumbBar control as a ListBox item. The BreadcrumbBar control's template displays each item horizontally as a chevron, along with the corresponding page title. The most difficult part to getting this to work is the control template itself. I used Blend 3.0 to edit the template so even that wasn't that difficult. I also made a couple of changes to the Helix library itself to support breadcrumb style navigation in the Journal. More details on this below.

The Sample Application

Patterns & practices guidance is organized by four high-level focus areas – Fundamentals, Client, Server and Services. Within each area there can be a number of sub-categories (such as security, performance, etc), and within sub-categories there is the guidance itself. Since the catalog is hierarchical, it’s a natural fit for the breadcrumb navigation pattern. I’ll describe a simple application that uses the BreadcrumbBar control and Helix to allow the user to browse through the patterns & practices guidance catalog. You can see the completed application and the BreadcrumbBar control in action here.

This is a simple application that has a simple shell that contains a BreadCrumbBar control and a Frame control in a grid:

 <BreadcrumbBar Grid.Row="1"

        NavigationTarget="{Binding ElementName=frame}"

        ClearForwardStack="False"/>

 <Frame x:Name="frame" Grid.Row="2"

     NavigationUIVisibility="Hidden" InitialUri="HomePage"/>

The BreadcrumbBar control is connected to the target Frame through simple data binding. Since we’re using the BreadcrumbBar control we don’t need the Frame’s back/forward buttons so we can hide the Frame’s navigation UI. The Frame navigates to the HomePage on startup. That’s pretty much it. I’ll talk about the ClearForwardStack below. You can tweak some of the visual aspects of the BreadcrumbBar control, or even replace the control template, to suit your application’s UI style.

How Does It Work?

The BreadcrumbBar control is just a sub-classed and re-templated ListBox. When the NavigationTarget property value is set, it sets the base class ItemSource to the journal back stack.

 this.ItemsSource = NavigationTarget.Journal.BackStack;

If the user changes the current selection (i.e. by clicking on a previous breadcrumb), the target Frame is navigated to the associated Uri. To support this I added two new methods to the IJournal interface – GoBackTo and GoForwardTo. These two methods allow the journal to navigate directly to an entry that’s in the back stack or the forward stack, without having to navigate backwards or forwards multiple times.

 NavigationTarget.Journal.GoBackTo( entry, ClearForwardStack );

Two other things to note:

The current selection of the underlying ListBox tracks the last entry in the journal. In other words, as the user navigates to new pages within the Frame, a journal entry for it is added and it becomes the current selection in the BreadcrumbBar control.
The ClearForwardStack parameter is used to control how the journal’s forward stack is affected when the user clicks on a previous breadcrumb. Most often you’ll want the forward stack to be cleared, and this is the default. Sometimes you might want to keep the forward stack intact so the user can go forward again. To enable this, just set the ClearForwardStack parameter to false.

What’s Next For Helix?

Now that Silverlight 3.0 supports navigation, the need for Helix is not as great as it was. I actually wrote the original specs for the Silverlight 3.0 Navigation feature. The original design in fact was very similar to Helix, but due to a number of constraints the design evolved and became a little less extensible than originally planned. There are key extensibility points that Helix provides which enable a whole host of interesting scenarios that are difficult or impossible to achieve with the current Silverlight navigation implementation. I’ve really only scraped the surface of these in this series so I’ll continue to evolve Helix in order to explore these scenarios. I’m working with the Silverlight team to explore ways in which these key extensibility points can be opened up in upcoming Silverlight releases.

In the meantime, if you’re building a Silverlight application that requires navigation functionality, you should use the Silverlight 3.0 navigation framework since it’s robust and fully supported. Hopefully, the need for Helix will go away altogether once the Silverlight navigation framework is more extensible.

Partager via