Breadcrumb navigation is a secondary navigation system that usually represents a site visitor’s current position in the site, showing other pages above the current one in the site’s hierarchy.

In some sites, like those built with Dokuwiki, breadcrumbs actually show the history of the user’s session instead of the hierarchy of the user’s current position in the website.

Breadcrumb navigation is typically found at the top of a content region, and usually below primary tabbed navigation.

History? Bah, yesterday’s newspaper.

In his April 10, 2007 Alertbox, Breadcrumb Navigation Increasingly Useful, Jakob Nielsen declares, Breadcrumbs should show the site hierarchy, not the user’s history.

For the purposes of conceiving of solid, semantic markup, let’s agree with Nielsen. Breadcrumbs represent position in a site’s hierarchy.

Semantic values: hierarchy, location, current position

In hierarchical breadcrumb navigation, the following aspects of information are important.

• Steps in the hierarchy that show broader sections of the site related to current position, i.e., the ancestors of the current page
• The order of those steps
• The ability to immediately jump to any ancestor page
• Indication of the current page, which should not be linked

The markup

So, with those in mind, here is an example that provides just enough code and semantics, and little else.


<ol id="breadcrumbs">
<li><a href="../../../../../../">Kim Jong Il’s Favorite Widgets, LLC</a></li>
<li><a href="../../../../../">Military</a></li>
<li><a href="../../../../">Nuclear</a></li>
<li><a href="../../../">Warheads</a></li>
<li><a href="../../">Just for funsies</a></li>
<li><a href="../">2006</a></li>
<li class="current_page">Gilju, Hamgyong province, 0136 GMT</li>
</ol>


This markup is fairly lean, yet does communicate the order of steps via the ordered list.

Note that the Project Cerbera website provides a nice discussion and some other examples of breadcrumbs markup that are in line with this approach.

The examples at Project Cerbera also show nested lists to indicate the nested nature of the links, but that is over-the-top. The simple ordered list sufficiently communicates the order of steps in the hierarchy, without providing additional markup noise for a screen reader to announce or a designer to style.

Style

The breadcrumbs should strive to follow conventions.

• Take up one line
• Use a standard separator between steps, like >
• Each step links to an appropriate page using standard link indicators (underlined and colored)
  • Except for the last step, which should be unlinked and represent the current page

Unstyled example

1. Kim Jong Il’s Favorite Widgets, LLC
2. Military
3. Nuclear
4. Warheads
5. Just for funsies
6. 2006
7. Gilju, Hamgyong province, 0136 GMT

Styled example

1. Kim Jong Il’s Favorite Widgets, LLC
2. Military
3. Nuclear
4. Warheads
5. Just for funsies
6. 2006
7. Gilju, Hamgyong province, 0136 GMT

Minor variations could include having the current page item be in a bold font, however, breadcrumbs are secondary navigation. They don’t need to attract much attention.

To reference the Project Cerbera site again, the examples there use a greater-than background-image on the list items. That technique may stand better in cross-browser tests than the use of the after pseudo-class used here.

XHTML, CSS, Javascript: Cumulative aspects of a web page. Click the image for a larger version.

I’m thinking of using this diagram in an XHTML class I may be teaching in a couple weeks. The idea is to put XHTML, CSS, and Javascript in context with each other—yet to also illustrate that they are separate types of code and often are actually different files altogether.

My primary job for the last six years or so has been to create web sites. It has been about three years since I did a web site that relied on tables for layout. Simply, there is no really compelling reason to continue to use tables for web page layouts anymore. Further, there are solid reasons to stop.

So, I reworked their basic practice file to use xhtml and css instead of html and tables. Here’s a comparison of the two versions.