Breadcrumbs” refer to text on a web page that outline the pathway that page on a website, often as a string of text like “My Site > My Category > My Page.” Breadcrumbs are useful as a navigation aid on sites with hierarchal content because they serve as a map to tell the visitor where he is and, when set up as a menu, help him access related content.

After reading an interesting blog entry about the breadcrumbs on Apple’s website, I undertook to experiment with breadcrumb design — as I haven’t had real need for them in any recent projects. I had a few objectives:

  1. Create a flexible coding pattern for breadcrumbs that could be dressed up or dressed down.
  2. Experiment with a drop-down effect on the crumbs as seen on Zillow.
  3. Indicate the parts of the trail that will “disappear” if a particular crumb is clicked.

HTML for breadcrumbs

I decided to use an ordered list for the breadcrumbs. First of all, I use unordered lists for most navigation and I get tired of seeing them. Second, a hierarchy implies an order (although an ordered list isn’t ultimately the correct choice, theoretically, for indicating hierarchal rather than linear order). Finally, it allowed me to see a distinct difference between the top-level breadcrumb navigation and the drop-down navigation.

Plus, I get tired of using unordered lists so much, so I look for excuses to use an ordered list instead.

I can, in a variety of ways, design a simple text-only breadcrumb or I can, again in a variety of ways, dress the list up to make fancier breadcrumbs. So the ordered list satisfies my requirement for flexibility and modularity.

<div id="breadcrumbs">
	<ol>
		<li><a href="#">My Website</a></li>
		<li><a href="#">My Category</a></li>
		<li><a href="#">My Page</a></li>
		<li>You Are Here</li>
	</ol>
</div>

Drop-down breadcrumbs

The drop-down effect on breadcrumbs is one I am seeing more often of late. I am sort of tickled by it. It could have similar uses as those ugly directory pages for search engine optimization, but it’s contextual and tucked away. It might be helpful to a visitor and, if used in moderation, is unlikely to hurt.

<div id="breadcrumbs">
	<ol>
		<li><a href="#">My Website</a></li>
		<li><a href="#">My Category</a></li>
		<li><a href="#">My Page</a></li>
		<li>You Are (Dropping Down) Here
			<ul>
				<li><a href="#">Dropdown Breadcrumb Link</a></li>
				<li><a href="#">Dropdown Breadcrumb Link</a></li>
				<li><a href="#">Dropdown Breadcrumb Link</a></li>
			</ul>
		</li>
	</ol>
</div>

Breaking the trail

Sometimes breadcrumbs can just be very boring and once I had a drop-down in place I began to feel that the added complexity called for some enhancement when a visitor was moving back up the path, too. I’m sure I’ve seen a similar effect before that inspired the idea, but darned if I can remember where (probably lots of places).

The idea here is that if someone is 3 sections in and hovers over the 2nd breadcrumb, the crumbs after that will change to reflect the fact that, if the 2nd breadcrumb is clicked, the proceeding ones will cease to be there. For this I began experimenting with the CSS3 general sibling selector.

#breadcrumbs > ol > li:hover ~ li{}

The meat of…the bread of the…here it is

You can view the breadcrumbs and utilize them under the terms of a Creative Commons BY-NC-SA license. There is only one design and version as of right now, generally just me playing structure and effects, but I’m sure eventually I’ll design more (did one similar for work already).

I have tested the navigation design in Chrome 3.0, Firefox 3.6, Opera 10.1, IE 7, and Safari 4 (Windows). The functionality slightly from browser to browser — the “best” support appears in Firefox and Opera and the “worst” in IE 7, with Safari and Chrome in between. But, of course, the breadcrumbs degrade gracefully (only real thing keeping me from proclaiming it fully “progressive enhancement” is the absence of separators between the crumbs in IE 7 due to the lack of support for :after).

Caveats

I am using the CSS content property for purposes of demonstration and wouldn’t necessarily encourage it due to the whole inaccessibility thing, though it’s viable — I’m not sure the &gt; are going to be desirable in all accessibility scenarios.

In production, due to browser bugs (outlined below) some javascript enhancement would likely be called for.

While working with these enhanced breadcrumbs I found what I feel is a bug in browsers using the webkit rendering engine. Using the general sibling selector and :hover just doesn’t work in Chrome or Safari and, in fact, it gets downright ugly if you apply CSS3 transitions (brief lock-ups, etc.).

Of course, as usual, you’d have to work around IE’s lack of :hover on list items.

Final Note

I also began wondering if the behavior I was seeing, of the general sibling selector selecting only the general siblings after the affected crumb was really right. It seems pretty consistent across all the browsers (sans :hover anyway), but when you think about it, it certainly sounds like it should select all siblings, not just the ones after. Of course, the ones after the hovered element are the ones I want, so I’m not complaining.