Breadcrumb Bar Style Dashboard Navigation

I recently needed to provide a breadcrumb on a SharePoint dashboard page which uses web parts to provide information about a sales territory area. Because the sales territories are defined as a hierarchy consisting of thousands of areas (e.g. regions which contain districts, districts which contain trade areas, and trade areas which contain counties), I chose to use a Query String (URL) Filter to pass an area to the dashboard page, rather than trying to load the areas into a PerformancePoint tree filter or multiple cascading filters. As a result, the page is much more light weight and easy to navigate, however, at the expense of having to do full postbacks to navigate between areas.

Conceptually, the area breadcrumb needed to show the area being viewed and the path to that area (i.e. all of its parents). Additionally, the parents could be links, providing a way to navigate to any of the parent areas. A very simplistic approach could display the information in a manner similar to the following:

National > Region 1 > District 1D > Trade Area 1D2 > Orange County, CA

But then I thought of the Breadcrumb Bar that was originally introduced with the Windows Vista version of Windows Explorer. These aren't drives, folders and files, but the hierarchical nature of the sales territories fit perfectly. The benefit of this approach would be to allow additional navigation possibilities to any of an area's parent's children (read on if that's not clear).

With a bit of Googling, I found a nice basis for my breadcrumb bar with this example: CSS-Only Dropdown Menu. It basically provides a very simple, yet elegant, drop down menu with a little javascript to handle the mouseover and mouseout events.

Breadcrumb Bar Example for Orange County, CA (this example should be interactive... at least it was when I originally posted it):

• National
• • Region 1
  • Region 2
• Region 1
• • District 1A
  • District 1B
  • District 1C
  • District 1D
  • District 1E
  • District 1F
• District 1D
• • Trade Area 1D1
  • Trade Area 1D2
  • Trade Area 1D3
  • Trade Area 1D4
• Trade Area 1D2
• • Los Angeles County, CA
  • Orange County, CA
  • Santa Barbara County, CA
  • Ventura County, CA
• Orange County, CA

After dummying up an example of how I wanted the breadcrumb bar to look, I then had to decide how I would need to format the data to populate such a control. I came up with the following which required a stored procedure that basically has to determine each of the selected area's parents and the children of each of those parents (you'll have to design your own query based on your database design). Again, the following is what would be needed when passing "Orange County, CA":

AreaName	AreaType	AreaLevel	IsSelected
National	National	1	1
Region 1	Regions	2	0
Region 2	Regions	2	1
District 1A	Districts	3	0
District 1B	Districts	3	0
District 1C	Districts	3	0
District 1D	Districts	3	1
District 1E	Districts	3	0
District 1F	Districts	3	0
Trade Area 1D1	Trade Areas	4	0
Trade Area 1D2	Trade Areas	4	1
Trade Area 1D3	Trade Areas	4	0
Trade Area 1D4	Trade Areas	4	0
Los Angeles County, CA	Counties	5	0
Orange County, CA	Counties	5	1
Santa Barbara County, CA	Counties	5	0
Ventura County, CA	Counties	5	0

As an example, if I pass "District 1D" to the stored procedure, it would return "Region 2" and "National" (i.e. the parents of "District 1D") and "Region 1" (the additional child of "National") and the other children Districts of "Region 2".

Finally, I needed to build the control. I could have easily written a custom web part, but opted for a Data Form Web part instead. This basically required a bit of XSL to build the HTML. Again, I'll leave that exercise to you, the reader.

The final control also included an "enabled" flag that would allow me display the hierarchy, but disable parent areas that users did not have access to. This required an additional argument to the stored procedure of the user accessing the dashboard.

Although this post is light on code, I hope that it may help in creating your own breadcrumb bar for the navigation of a PerformancePoint dashboard.