Search | Directories | Reference Tools
UW Home > Discover UW > Site Information > Guidelines 

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:

  1. 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:
    Important Notes:


  2. 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: 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:
  3. 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. 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:

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: