Marking up breadcrumb navigation

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

Styled example

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.

Davin's blog