Looking over over the last SimpleQuiz, one of the comments that struck me was one by Darrel:
In terms of an anology, it refers to leaving a trail based on where you’ve been. Very few navigation systems actually do that though. Rather, they show you were you are in relation to the site structure.
Great point — and one that I think rules out a few of the other markup possibilities. An ordered list would be appropriate only if the list of links were an accurate trail of where the user has been. This is oftentimes not the case, as Darrel notes.
The other interesting method that was mentioned was the nesting of unordered lists to convey a hierarchy of directory structure. This could be the most semantic way of presenting the list of links — but as many suggested, it’s a bit of a markup overkill.
As Doug said:
…no one really wants to code this:
<ul>
<li><a href="/">Home</a>
<ul>
<li><a href="/articles/">Articles</a>
<ul>
<li><a href="/articles/file.html">Title</a></li>
</ul>
</li>
</ul>
</li>
</ul>It accurately portrays site structure … And nested lists represent a snippet of a site map in outline form.
Here’s a case (and this happens from time to time) where perhaps the method that’s more semantically rich, adds way more code than really necessary. And it’s got me scratching my head saying “it’s all about compromises again”.
If semantic purity is your goal, then nested lists may be the way for you — if simplicity is what you’re after, something like Method A might work.
The past few conclusions have me sounding like broken record — that it’s all about balance: Semantics vs. practicality vs. simplicity vs. requirements. Somewhere in the middle is usually just right.
Dribbble What are you working on? 
Instapaper Icon design 
Sass For Web Designers Paperback + eBook A Book Apart
CSS3 For Web Designers Paperback + eBook A Book Apart
Bulletproof Web Design Third Edition New Riders 
Handcrafted CSS Book and DVD New Riders 
Web Standards Solutions Special Edition Friends of Ed
24 Comments
Once again, I maintain my support for the nested unordered lists no matter how convoluted it may get. On top of its semantic purity, I feel it presents the most flexibility in styling as well. The way I see it, the standards purist in me feels good about coddling to my visual design demands.
“An ordered list would be appropriate only if the list of links were an accurate trail of where the user has been.”
I disagree. It can be viewed as displaying numbered levels in a hierarchy. But semantics is about subjective opinions, isn’t it? :)
/Tommy
When I first started designing my new site, I used the nested
<ul>technique, and quickly realized that, although semantically correct, it added a lot of extra work, not to mention a good amount of extra code to an otherwise streamlined page.I felt when viewing the nested list without the CSS (to place the links inline), it became less obvious that the list was supposed to represent the site’s structure because there was only one link per level; which makes for awkward looking indentations.
I eventually opted to get rid of the extra markup, feeling that a plain directory structure should be fairly recognizable to most people anyway; i.e. something like:
C:\DATA\PICTURES\is pretty self explanatory on its own…likewise, I felt that:home/about/aaron/would be intuitive as well.Like most design issues, I’d agree with Dan and say that it’s a judgement call…tradeoffs will always exist, and it’s up to the designers decide what works best for each situation.
I’m going to have to agree with Aaron Schaefer on this one.
While not a perfect “semantic” way to do it, the idea of
website://home/about us/jeff/
actually makes a lot of sense. People are very accustomed to seeing that sort of structure in both their explorer environment (even linux and mac) and everyone uses that syntax for websites. This leads to a very strong association with exactly what wer are trying to establish – a heirarchy of the site structure.
That it probably my best option – for both code’s sake, and the user’s sake.
(p.s. there is some kinda of error on the preview page: MT::App::Comments=HASH(0x827d698) Use of uninitialized value in sprintf at lib/MT/Template/Context.pm line 1187.)
Wow – what Darrel said is so true. Real breadcrumming would be quite different, I suppose.
Thing is, a lot of the time we label it ‘you are here’ rather than ‘you came from here’.
I wonder what the ‘average user’ thinks about this? Do they think of it as ‘breadcrumbs’, or is that just ‘us’?
I wonder if changing the way we do it would be ‘confusing to users’, or if we labeled it accordingly it may help?
Useit.com just uses arrows and leaves it to the user to sort out. In fact, I think the directory structure look makes much more sense than the arrows… but that’s just me ;-]
Wow…I get quoted and, of course, it has to be a quote a glaring typo. :o)
Anyways, I’m not sure if my comment really changes the thought behind a lot of the answers. It was really just a push for us to stop using the term ‘breadcrumbs’ which doesn’t really refer to what we were all talking about. You could argue that this is a minor nit-pik, but there are valid times to use something that is actually a breadcrumb metaphor, and then there are times to use a navigation element that shows your heirarchy within the site (the latter being the more common). I just believe they each deserve their own terms.
FYI, in case anyone missed it, I think Thomas Baekdal’s method is worth a careful look at: http://www.baekdal.com/example.asp
Wow…I get quoted and, of course, it has to be a quote a glaring typo. :o)
*sigh* I give up. I’ll always be full of typos…
Darrel’s comment jogged my memory a bit. A distinction should be made between an orientation list and a breadcrumb trail. The two are often used synonymously, when they mean quite different things.
That distinction was made clear on a previous project that required both an orientation list and a breadcrumb trail, since users would be moving around the site structure. The breadcrumb solution ultimately involved session variables, arrays, and some magic, but I think it worked well and as intended.
If what is really needed (and what is often intended when the two terms are used indiscriminately) is an orientation list, then a nested un-/ordered list may make semantic sense, but I find something like Aaron’s implementation to be quite elegant. And that’s essentially what I’m using on my own site.
I agree with Darrel’s thoughts
Peter-Paul Koch has tried a nifty way of ‘breadcrumbing’ at quirksmode.org that I quite like, although it’s based on JS and could be done with session variables as easily.
The idea is exactly the one explained by Darrel, if I understood well.
I found it nifty at first sight.
Yet I don’t know. Maybe, indeed, people don’t care how they came to this or that particular page. Back buttons are there exactly for this reason, aren’t they?
I agree. The quirksmode way takes a while getting used to. Do I actually use it? Hardly ever.
If a site is categorized in an efficient way, one should always be able to know wehere to look for something. The classic breadcrumbs will then give you info on the site structure.
The nested ul makes sense if you consider populating the list with all the possible options, but displaying only the applicable ones. IDs and classes assigned to the body tag can be used to automatically determine which items to display.
Of course, downloading an huge xml-like structure of elements – almost all of which will not be displayed – may not be the prettiest solution, but if it’s semantic purity you’re after…
The classic breadcrumbs will then give you info on the site structure.
We’re kind of going in circles here. We’re all using different words to talk about different things.
OK, let’s us a simple site as an example:
HOME
|-products
| |-phones
| |-Nokia
| |-buy
| |-Samsung
| |-buy
|-specials
| |-online sales
| |-Nokia Sale
That, as shown, to me, would be your standard hierarchical navigation system. Click on ‘specials’, then you see the options below it. Good, consistent navigation.
Now, let’s say I went to that site to buy something, and took this path through the site:
Home > Specials > Online Sales > Nokia Sale > Buy
On the ‘buy’ page, the above menu (if shown) would be called ‘breadcrumbs’ since that is the path one took to get to the page they are on.
However, normally, what most people call breadcrumbs would actually look like this:
Home > Products > Phones > Nokia > Buy
Which is a different thing, and one that I believe is better labeled as ‘topic path’ navigation…or rather, anything but ‘breadcrumb’ navigation.
Personally, I find true breadcrumbs to be tough to implement in a way that really benefits the user. I’ve seen various attempts at it, but it usually doesn’t work. On the other hand, I find topic-path navigation to be incredibly useful…especially on sites that don’t use good hierarchical navigation to begin with (ie, crazy javascript fly-out monstrosities).
Ah crap…my ASCII site map didn’t work. Let’s try:
HOME
|-products
|..|-phones
|….|-Nokia
|….|..|-buy
|….|-Samsung
|…….|-buy
|-specials
|..|-online sales
|….|-Nokia Sale
What is a “broken record”?
Shouldn’t it be that you are sounding like a skipping CD?
The semantics of breadcrumbs are inextricably linked to a strict visual format: left to right. They are no more a list than the words in this sentence(another left-to-right construction that should be left alone). Without the correct stylesheet, the breadcrumb effect is lost. This fact alone should preclude the use of a list to mark up breadcrumbs. In fact, I will argue that it’s more anti-semantic than semantic. Lists have huge value in semantic web design and navigation, but not once everything is a list.
Take a step back guys, remember their is a whole forest to consider.
Oh yeah, Darrell, your typo escapade still has me rolling : )
and yours Zach ?
their / there or they’re – you decide : )
Chris, you’ve obviously never been lost in the forest of their. If you had, you would realize the myriad considerations of which I speak. And just so you know, there is not so much a whole forest as it is a glorified wooded patch–hardly memorable, even less considerable. And they’re? Give me a break! You could barely hide an easter egg in that measly thicket, let alone risk getting lost to the point of needing breadcrumbs.
No, I stand by their as being the best forest to illustrate the grave importance of proper breadcrumb markup. Trust me on this one. ; P
Zach, please correct me if I am misunderstanding your comment, but isn’t the use of the > (or Joe Clark’s semantically correct →) showing in a visual way that the flow of the “breadcrumbs” goes from left to right? The arrow characters are pointing to the right, thus symbolizing that one leads to the other.
Again, perhaps this isn’t an all-around correct way to look at things, and if so please correct me or question me.
Breadcrumbs shouldn’t be thought as a narrow view or a hierarchy of topics. Rather, they should be thought of as a way of classifying web pages by “taxa.” It is very similar to how biological names are created: Topics are identified by a list of overlapping categories and ordered by increasing generality. In this way breadcrumbs aren’t trails; instead, they are taxonomic classifications.
Found today via Mezzoblue…
The Page Paradigm
I found a wonderful replacement for the purist quirksmode-style breadcrumb trail: the browser history list next to the back button. Perhaps breadcrumb trail is a bad term because it is only useful in its broken definition, a site structure branch.
Just thought I’d share an interesting study on the popular breadcrumbing styles in use:
Location, Path & Attribute Breadcrumbs
http://user-experience.org/uefiles/breadcrumbs/
And here are the results of a study amongst users of the different breadcrumb types Malessa mentions:
Exploring User Mental Models of Breadcrumbs in Web Navigation
So, I think location breadcrumbs are the most usable type in general, although the other two types may have their merits in certain situations.
Regards,
Martijn.