This document describes some of the techniques you can use to customize the appearance of the BreadCrumbs Control. There are two sections. The first section goes over the properties that can be used on the BreadCrumbs tag. The second section describes making changes to the control templates.
BreadCrumbs Control Properties
BreadCrumbs Control Templates
Note: It is good practice to make a backup copy of a file prior to making a change so that you can easily restore a working version.
BreadCrumbs Control Properties
In the previous examples, you saw how to add the BreadCrumbs.ascx user control to a StoreFront page or common control. If you opened BreadCrumbs.ascx, you would find the BreadCrumbs Control tag which looks similar to this:
| <sfaddons:BreadCrumbs id="BreadCrumbs1" runat="server"> |
This inserts the default BreadCrumbs Control. The complete tag, with all the default values explicitly set, would look like this:
| <sfaddons:BreadCrumbs id="BreadCrumbs1" runat="server" HomeName="Home" ProductCategories="All" ShowHome="True" ShowProduct="True"> |
All the basic properties are summarized in the table below:
| Property | Default Value | Allowable Values | Description |
|---|---|---|---|
| HomeName | "Home" | Any text | The text that is displayed for the home page link at the beginning of each path. |
| ProductCategories | All | All, First, Last, Longest, or Shortest | A keyword that selects the path(s) that are displayed if the category trail can not be determined. |
| ShowHome | True | True or False | A Boolean value that determines if the home page link should be displayed at the beginning of each path. |
| ShowProduct | True | True or False | A Boolean value that determines if the product name should be displayed at the end of each path when a product page is displayed. |
Example
In this example, the book "American History Part 1" is in two different subcategories: American History and Mysteries. If a customer followed a link directly to the product detail page from outside the store, it would be impossible to determine which path to display without a hint. That hint comes in the form of the ProductCategories property which has 5 possible values:
| Value | Description |
|---|---|
| All | List all product category paths |
| First | Only show the first category path retrieved from StoreFront |
| Last | Only show the last category path retrieved from StoreFront |
| Longest | Only show the longest category path retrieved from StoreFront |
| Shortest | Only show the shortest category path retrieved from StoreFront |
The default value of All will show all category paths like this:
Changing ProductCategories to Shortest will result in this:
| <sfaddons:BreadCrumbs id="BreadCrumbs1" runat="server" ProductCategories="Shortest" > |
BreadCrumbs Control Templates
The BreadCrumbs Control is a custom Repeater that depends on an internal DataList to format a breadcrumb path. A path is formatted for each matching category. The DataList control includes 2 templates which are used to create the path: an ItemTemplate which is used for each step in the path, and a SeparatorTemplate which is inserted between each step. The sample templates in BreadCrumbs.ascx look like this:
| <ItemTemplate> <asp:HyperLink id="CatalogLink" runat="server" NavigateUrl='<%# DataBinder.Eval(Container.DataItem, "url") %>'> <%# DataBinder.Eval(Container.DataItem, "name") %> </asp:HyperLink> </ItemTemplate> |
| <SeparatorTemplate> > </SeparatorTemplate> |
Together, these create a series of HTML links separated by the symbol ">".
Example
In this walkthrough, we will change the separator from ">" to ">>".
- Open BreadCrumbs.ascx in an editor.
- Find the code shown here:
<SeparatorTemplate>
>
</SeparatorTemplate> - Change ">" (the symbolic name for ">") to ">>" as shown:
<SeparatorTemplate>
>>
</SeparatorTemplate> - Save the change and load a page with the BreadCrumbs Control. The result
will look something like this:
Copyright © 2003, Structured Solutions. All rights reserved.