Creating and Using Breadcrumbs
Breadcrumbs are navigational links that appear below the page header. They
provide a hierarchical path that can assist users in orienting themselves within
a site. They do this by providing users with additional context about where the
page they are on lies within the framework of the UW Web site. Crumbs also allow
the user to easily navigate "up" one or multiple levels in the UW site.
How do they work?
Breadcrumbs show the path that a user would typically take to access the
page if they were to start from the UW homepage. They do not necessarily
follow the directory structure. In other words, these breadcrumb paths
should represent how the user should view the structure of the
site, and not how the directories are physically structured. For example,
the Pine Web site is located at www.washington.edu/pine/, however to get to
the site from the UW homepage, the user must first go to
www.washington.edu/computing/. For this reason, the first breadcrumb on
the Pine site should be 'UW Home' followed by 'Computing and Networking'.
What do they look like?
The breadcrumb for the current page, as seen in the header, includes:
It is important to note that the breadcrumbs provide a single
hierarchical path. Though there may actually be more than one route to
access a specific page, Web developers are asked to choose either the most
frequently used route, or the route that will provide the user with the
most appropriate context.
How do I use them in my site?
The first one or two breadcrumbs (UW Home, and perhaps the "area"
topic) are created automatically for you when you use one of the automated
header templates: //home/incs/headercommon.inc, emheader.inc, etc.
To create the remaining crumbs, do the following:
- Create a file, we'll call ours breadcrumb.inc, that contains the URL and link text for each breadcrumb. The formatting should look like the example below, though you should replace anything in italics with your own information:
<!--chtml include "//home/incs/makecrumb.inc"-->
<!--chtml set c1 = onecrumb('/mydirectory/someparentfile.html', 'My Crumb Text')-->
<!--chtml set c2 = onecrumb('/mydirectory/anotherfile.html', 'Text For Another Crumb')-->
<!--chtml set c3 = onecrumb('/mydirectory/yetanotherfile.html', 'Text For Yet Another Crumb')-->
Important Notes:
- To simplify page maintenance, put all the breadcrumbs for your series of pages in one file. It will be easy to choose which crumbs to use in a future step.
- Notice the use of single quotation marks when specifying crumbs.
- Notice that each crumb requires you to specify both a URL and the actual text that you want to appear. In this case, we specified three different crumbs. Also note that the "makecrumb.inc" file must be included before specifying any breadcrumbs.
- The values "c1, c2, c3" are simply variables. Though you can change these to be anything you want, we use c1, c2, c3 for simplicity.
- The order of the crumbs at this step does not matter.
- Include the breadcrumb.inc file at the top of each of your
html files using chtml. This line must precede the code that
includes the centralized header
file. To include the file, use the following:
<!--chtml include "//mydirectory/breadcrumb.inc"-->
where "mydirectory" is specific to the directory where you are working. For example, if you are working in the parking directory (on the Web at www.washington.edu/admin/parking/),
and your breadcrumb.inc file was in "/admin/parking/", you would need to specify your file like this:
<!--chtml include "//admin/parking/breadcrumb.inc""-->
- Specify which crumbs to use at the top of your html file (below the line included in step 3). You'll do this with the chtml function "call crumbs." The crumbs should be separated by a semi-colon.
<!--chtml call crumbs(c3; c4)-->
In this case, we specify that we would like to use the crumbs named c3 and c4, in that order.
To summarize, you must create a master breadcrumb file that defines the URLs and link names of your crumbs. Then,
at the top of your html files, you'll simply specify:
<!--chtml include "//mydirectory/breadcrumb.inc"-->
<!--chtml call crumbs(c3; c4)-->
Note:
The two lines shown above do not necessarily need to be the first lines
of your HTML file (though this would work). They must, however,
appear in your document before the code that includes the centralized header file, since the header uses the
crumbs that you specify.
Are there any style guidelines for my breadcrumbs?
There are several recommendations for defining your breadcrumbs:
- Use the full title of pages when the title is short (1-3 words) and meaningful.
- Shorten lengthy (more than 3 words) titles to increase clarity. Be certain that the shortened title is meaningful.
- Capitalize the first letter of each word, except articles (a, an, the) and short connectors (and, to, by, etc.)
- Avoid the use of abbreviations that are likely to confuse users. Abbreviations such as "UW" are acceptable.
- Try to limit the number of crumbs to 6 or fewer (90 or fewer characters). Choose the most meaningful crumbs that provide context for the user.
- When multiple paths exist to a site, use the path that is either the most frequently used route, or that will provide the user with the most appropriate context.
- Remember, breadcrumbs should provide a single hierarchical path for the user, not just random links or links to related topics, which may be included within the page itself.
