Breadcrumb navigation. This is an interesting topic, sent in by Thomas Baekdal. Breadcrumb navigation is commonly used as a method for showing the user where they are within the structure of a site — and giving them an easy way of getting back.
Marking up a breadcrumb trail of links could be handled a variety of ways — and I’m interested in hearing people’s thoughts on how they’re best presented structurally, keeping in mind an unstyled version as well.
In addition to the four methods below, I’m sure there are countless other scenarios. Don’t be afraid to suggest a “method E”.
Q: Which is the best method for marking up a breadcrumb trail of links?
-
<p>You are here:
<a href="/">Home</a> >
<a href="/articles/">Articles</a>
</p> -
<p>You are here:</p>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles/">Articles</a></li>
</ul>
-
<dl>
<dt>You are here:</dt>
<dd><a href="/">Home</a></dd>
<dd><a href="/articles/">Articles</a></dd>
</dl>
-
<dl>
<dt>You are here:</dt>
<dd>
<a href="/">Home</a> >
<a href="/articles/">Articles</a>
</dd>
</dl>
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
76 Comments
You can probably see this, but the last option (“D”) has a “C” in the background image.
Anyway, depending on where you want the breadcrumbs to be displayed, I would choose “A.”
Oops. Thanks — and fixed.
A is my favorite. I don’t like the idea of using lists, personally. The formatting idea you’ve presented in D is pretty good, but instead of using definition lists, I’d instead use divs and spans to make it look how it is supposed to. So I’ll stick with A, with an option E thrown in, depending on the application.
Ah, good question, mainly for the unstyled considerations that must be made. With horizontal navigation, lists are the obvious choice, because they degrade so gracefully. But, how confusing would it be if your navigation and breadcrumbs both degraded into lists, one above the other? However, answer ‘A’ doesn’t work for me either, not really descriptive enough. So, I think Answer ‘E’ it is: DIVs? (I guess) First level breadcrumb would be <div class=”one”> (or “levelOne”), second level would be <div class=”two”>, etc. This way you could throw a vertical seperating bar or a background image in there without screen readers having to read everything out like they would with a “home » here » there » everywhere” type deal.
I’m going with A. I don’t think a breadcrumb trail is complex enough (in terms of items and separators) to justify a list-type format. If you’re going to convert a breadcrumb trail into a list, then why not a company info line on a page footer (about us | contact us | sitemap)?
I’ve never seen anything like the above implemented, quite possibly because it’s considered too ridiculous to put so few items into a list-type format.
There are many sets of links that I see everyday, which are simply separated with spaces or pipe symbols, that should be formatted as inline, unordered lists, such as page links (Go to page: 1, 2, 3, etc) or alphabet links (Go to letter: A, B, C, etc). I don’t consider breadcrumbs as one of those instances that needs this.
At least with the two examples above, each link has a good degree of equilibrium in terms of relating to one another and defining the overall purpose of the list structure. Of course, a breadcrumb set of links does have a relationship to one another, but the link set doesn’t really relate to one another equally. I mean, links near the beginning of the breadcrumbs have more “weight” than what follows, but list items are typically equal in terms of “weight” (in my opinion).
If you must put your bread crumb trail into a list, shouldn’t it be nested? Articles should be nested within the Home list, and whatever article follows in the line-up should be nested within the Article list. This is obviously a ridiculous design to have considering each inserted list will always, only have one item.
Allow me to be the outsider. :P
I would actually prefer the list method, though it’s not technically semantic. It seems that a breadcrumb item actually points to the item after it. Perhaps a tree structure would be more semantic, strictly speaking.
However, there are practical reasons for preferring a list. It allows for more flexibility later on. The structure allows you to style both the anchor elements and the list elements. Also, you may not always want the > symbol. These are all subtle differences, but that’s how I prefer to do things.
On a final note, I think the overwhelming use of the paragraph element for almost every block-level section of information is a little…er…overwhelming. Many things structured with paragraph tags are far from being paragraphs. Then again, I haven’t bothered to look up the XHTML recommendation’s definition for the paragraph element, so I may way off on this point. After all, XHTML isn’t English, even if the elements have English names.
All of the methods would serve the designer well. It’s definitely a matter of preference, for the most part.
I’d go with C. Each item contained within a surrounding element like
<dd>makes sense if you start thinking about styling possibilities — no one says each item has to be one after the other, left to right. B and C are the only two that provide this, and the term->description relationship of C somehow works in my head.But it still doesn’t feel right.
<menu>would probably be perfect here if, you know, it weren’t deprecated in HTML 4.01.While the markup freak in me really wants to pick B or C, in reality, I think A would be most appropriate. Since most breadcrumbs I see are horizontal anyway, this would require minimal styling and would maintain its horizontal layout (and the “>” separator) in non-CSS browsers.
If you were hellbent on using an (un)ordered list, it would definitely make more sense structurally to nest each level within the level above it, but this is probably a ludicrous amount of markup for something so simple.
I agree that a list seems like the way to go, but don’t think a definition list is quite appropriate as each DD only has a relationship to the DT, while in breadcrumbs each has a relationship to its hierarchal parent.
Also I prefer → to >.
I think B is most reasonable. To me, definition lists are somewhat overused, and I can’t see the semantic reasoning behind using a
<dl>for a breadcrumb trail.In fact, I might consider an option E:
<h3>You are here:</h3><ol>
<li>...</li>
</ol>
I think a heading is more appropriate than a mere
<p>before the list. Using an ordered list also makes some sort of sense, since the links describe a hierarchy traversed in a particular order./Tommy
Looks like Tyrone said it all for me. I’d pick A for simplicity’s sake.
Some of the CSS tabs that had ‘subtab’-type children can give the whole breadcrumb-like effect, in terms of a visual clue as to where you are. Adam Kalsey’s CSS tabs are the only example of lists-with-kids that I can think of offhand.
Great question!
I would have to go with TOOLman’s idea presented above.
As he says, using an ordered list gives some hint as to the hierarchy involved.
From the specs: A heading element briefly describes the topic of the section it introduces.
Assuming that one considers breadcrumbs as a section of the document, Hx tags would be the way to go.
Lists are most defintiely not the way to go. This is where the semantic markup rubber hits the road. It’s a perfect example on when one can overdo it trying to be “semantically correct” in their markup when there’s really no need.
If the W3C wanted to add a <crumb> tag, then fine, go for it. But breadcrumbs are a construction that were created as a device all on its own. It’s a widget if you will, and one whose purpose is defined as its own entity. Until there’s a tag for it, there’s no need to force it to have some other meaning like a bulleted list.
It’s the same problem I have with using number h tags for ancillary information on a page. A sidebar header often times has no meaning in a number heading order with the content on the page. Yet, there’s no general h tag, so people are forced to add titles in sidebar using one of the h# values, implying that the title somehow fits in at a certain level with the main content.
When sidebars are viewed without the style sheet, the sidebar titles will be emphasized with whatever level the author happened to choose as the shortcut for sidebar headers, which may or may not be appropriate. The drive towards simple code and semantic markup is pushing this behavior it seems.
So, of the examples, it seems A is fine. This example would be more correct IMHO:
<div id="crumbs">
<p>You are here:
<a>Link</a> »
<a>Link</a>
</p>
</div>
One could argue that for widgets with structure that is built into the widget itself, people should be wrapping them in divs tagged with id’s to be “semantically correct”, rather than trying to construct some meaning from tags that were never intended for those widgets.
At least until the W3C adds tags for those widgets.
Something close to A is probably what I’d use because of its simplicity. A single list, as presented in options B and C, would present all nodes as being at equal levels, which would not be correct.
I’ll venture to suggest that a series of nested lists might actually create the most semantic structure for breadcrumb nav. That is, if by “breadcrumb navigation”, we’re talking about the display of a hierarchical path back to the top page of a site (rather than retrace a user’s immediate history list within a site, as true Hansel and Gretel “breadcrumbs” might do).
While 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 (this page belongs under this section, which belongs under this section…). And nested lists represent a snippet of a site map in outline form. It would also present numerous possibilities for styling.
How the label/heading “You are here:” is attached, is minor, comparatively.
By day I work on a CMS, and I’m just switching over to semantic markup for all the menus. This markup is generated automatically, and in the case of a breadcrumb trail it will generate the markup Doug describes above. I personally feel all menus should use the same semantic markup whatever it be (of course I’d prefer there were actual menu tags).
I’ll go for C, as it answers the question of how it should look both styled and unstyled, and for screen readers where you don’t want it to read the >> notation. Down side is that >> can only be inserted via a image (at least until CSS improves). Also, as others have noted, it should really have each element nested so that you see a tree style heirarchy.
Some people like breadcrumbs in their own right. An alternative is to explode whatever navigation menu you have to show the current position, in which case it probably ends up in a .
I agree with Tyrone and Doug, a nested list makes the most semantic ‘sense’.
I actually quite like the arrow shape a single item nested list makes; there won’t be any trouble finding it in the markup!
I’m in support of the optional E, though I’m not sure how best it would be represented. I think the ideal would be a nested definition list, actually.
<dl>
<dt>You are here:</dt>
<dd>
<dl>
<dt><a href="/">Home</a></dt>
<dd>
<dl>
<dt><a href="/articles/">Articles</a></dt>
<dd>Home</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
But I’m not sure that that solution is valid markup. (It seems logical to me that someone at some point would want a definition within a definition, but who am I to argue with the W3C?) Failing that, I would probably just go with divs/spans to differentiate each part of the breadcrumb (both so the data would be easier to access and to style separately if necessary); no p tag at all because it’s not logically a paragraph.
Of course, I sorta agree with some of the comments about nested lists being overkill for something so simple. It would almost be like regressing back to the days of font tags and tables in terms of increased markup for something ridiculously simple. ;)
I would choose C.
- A locks your code to a certain presentational model
- B is more correct, but you still do not have any relation to “You are here” and the list items
- D is better than A, but like A, it locks your code to presentation
Semantically speaking a variation of Doug’s suggestion would be more correct – e.g.:
<dl>
<dt>You Are Here</dt>
<dd>
<ul>
<li>Home
<ul>
<li>Articles
<ul>
<li>Headlines</li>
</ul>
</li>
</ul>
</li>
</ul>
</dd>
</dl>
This way we have the definition topic “You are here” and semantically correct definitions
But the code gets bloated, which is why I recommend C as the best choice.
D.
When viewed unstyled Breadcrumbs should be easily recognised as being a Breadcrumb trail, i.e. a horizontal sequence of links with some kind of separator. Unstyled unordered lists don’t provide this and just look like general navigation.
I think it’s C the correct one : because :
1- It’s semantically about definition
2- You don’t have to specify the
>coz’ it’s the job of the CSS maker to do it.I’ve just been reading the above comments, and I think the point that seems to have been missed is that its the semantics of the code that matters. A) and B) don’t actually imply any inherit relationship between the items (including the “You are here:” bit).
D) seems like a possibility but it fails to separate the actual crumbs, and as the W3C spec allows you to have multiple instances of a <dd> with every <dt>, C) seems the obvious semantic option.
Dave has said that the » can only be inserted by an image until css improves, but this is only true if you’re trying to use the
:afterselector. You can of course (although it’s not strictly semantic) just use a» before the content of each <dd>I’d prefer B
If someone asked you as you were surfing a site where you were and how you got there you’d say something like:
“Well I started here. Then went here. Moved on to here and finally ended up here”
If this isn’t a list (in this case of pages/sections/whatever) I don’t know what is!
Tyrone suggested that it might be a bit too much to turn a breadcrumb into and asked “then why not a company info line on a page footer”?
Well, that is exactly what I have been doing for some time. To give you (all) an example looks at
- http://www.baekdal.com/example.asp (test page)
On this page every navigational elements are created using the C option. I decided to do it this way after some experimenting. I think that it makes the whole page much easier to grasp – no matter if it is displayed styled, unstyled or in pure code.
I especially like the unstyled version where you are explicitly told what each element is. I also like the freedom if you ever need to change the visual layout of the site.
That’s not the first Quiz where the debate concentrates (mostly) on a solution A which uses paragraphs, a solution B with uses lists and a solution C which uses lists.
Some like A, because it’s simple.
Some like B, because lists are sooooo cool with CSS.
Some like C because they worry a lot about semantic meaning.
Some will just use the handiest solution. I like C.
Ah yes, that nice gap between
dir/menuandnl.dirandmenuwere deprecated, but no real alternative was provided.XHTML2, however, will have navigation lists (yay!).
Look at this sexy (and semantic) piece of code:
<nl>
<nl>You are here<nl>
<li>SimpleBits
<nl>
<li>SimpleQuiz
<nl>
<li>Part XII: Breadcrumbs</li>
</nl>
</li>
</nl>
</li>
</nl>
Anyway, that is then, this is now…
I find myself using a and b for breadcrumbs mostly, but I use description lists with nested ordered/unordered lists for navigation lists (I don’t really see breadcrumbs as lists).
My 2 cents…
ACJ
Eek! The
<nl>You are here<nl>is supposed to be<label>You are here</label>. My bad.Heya boys.
I’m a huge fan of the lists. Because realistically it’s a list of links in a certain order that you took to get where you are. But its also a definition of where you were in the website. A list inside of a definition would seem to be most semantic, but I think I’m going to go with the plain ole’ list on this one. Opting for cleaner less embedding in the code.
I would say A. “Articles” is within “Home” so, unless you would want to get nuts with nesting, B and C don’t make sense semantically.
Using a definition list, like in D, seems convoluted for what’s being done… although, I suppose, it’s still technically correct.
A and D look nicest in Lynx, too.
My choice would be option C. Option C seems to be the best option because of 2 things. First, when designing a style sheet, creating different styles for the breadcrum navigation would be easy to sperate designs for the farther you go in. Secondly, it defines the level of the depth you are into the web site.
My next choice would be B. Also because it defines the depth of your visit. As some posters already mentioned, using nested lists would be a better than option B. Option B also would allow accessibility from older browers (PDA’s etc.) to understand the meaning of “You are here”.
C.
For many of the reasons stated above.
I’m a fan of Definition Lists, not everyone might want to have “You are here:” display on the page. Some folks prefer using just the breadcrumb trail itself (although using the you are here tag may make sense from a usability perspective). If that’s the case, then a definition list really isn’t appropriate. I’d put the breadcrumbs in a then, because the code for nested one-item unordered lists would be bloated and one-item lists are kind of odd.
I personally would use an unordered list with nested sublists, or choice (E).
It may even be appropriate to head the list with an <hn> tag.
The way I see using lists/sublists to make the bread crumb trail is that if you take the bread crumb trails from every page and in a sense, combine them, you can end up with a site map/tree.
I say F (or was it H?). Regardless, Thomas Baekdal and Doug were on the right track. Yes, perhaps the code is a tad bloated, but it is the most semantically appropriate (at least until
<nl>makes an appearance with XHTML 2.0. As all of the bloated presentational markup is gone, I think it is ok to make breadcrumbs a little bloated for the sake of semantics.I like C, for reasons that have already been stated by others.
I would go with the nested lists as suggest by Doug. Semantic and hierarchial, which is essentially what we want.
I maintain it is a nested unordered list. Granted, this does present significantly more code, and seems downright silly (and almost feels wrong). Think of it this way: a breadcrumb is a history of where you’ve been and currently are. Your standard vertical navigation list presents this spatial orientation too. Thus, you take this typical nav list:
<ul>
<li>Games</li>
<li>
Books
<ul>
<li>Drama</li>
<li>Adventure</li>
<li>
Horror
<ul>
<li>
Stephen King
<ul>
<li>The Dead Zone</li>
<li>The Shining</li>
<li>The Stand</li>
</ul>
</li>
</ul>
</li>
<li>Comedy</li>
</ul>
</li>
<li>Video</li>
<li>DVD</li>
<li>Posters</li>
</ul>
Take out the irrelevant information:
<ul>
<li>
Books
<ul>
<li>
Horror
<ul>
<li>
Stephen King
<ul>
<li>The Dead Zone</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And you’ve got your breadcrumb
Books > Horror > Stephen King > The Dead Zone
I cast my vote for E, a styled ordered list. Unordered list items all have equal weight and could be jumbled without any loss of meaning. A breadcrumb trail, on the other hand, has a definite order.
I started at the home page, then I went over there, my third stop was there, now I’m here.
I’d like to go with XHTML 2 tag but unfortunatelly XHTML 2 isn’t ready now and our pet browser IE maybe never support it. :) :(
So I prefer E variant:
<h3>You Are Here</h3>
<ul>
<li>Home
<ul>
<li>Articles
<ul>
<li>Headlines</li>
</ul>
</li>
</ul>
</li>
</ul>
Is it possible to be too semantically correct? I think A is the best answer for simplicity’s sake. Some of the other choices use entirely too much code for such a simple thing as a breadcrumb trail. And some mentioned in the comments, no offense, are just rediculously tedious. Some of the choices would not even closely resemble a breadcrumb trail with styles turned off.
I’m all about semantics, but when it requires three times as much code, it kind of loses it’s appeal. What really matters is what the end user sees, and if answer A looks the same as anything else, that’s good enough for me.
If I was using lists I would nest them because that would be more usable … at the very least I’d use an ordered list as oppposed to unordered. But lists seem misleading to me and I would not use them for breadcrumbs. I’m more concerned about usability than sematics and I think lists could be confusing.
I would use A or D and, if I needed more control, I would do something like the following:
#crumbs { //whatever styles for the “you are here” }
#crumbs .crumb { // style for individual crumbs }
#crumbs span img { display: none; }
You are here:
Item 1
Item 2
Sorry, first post. Lemme try that again:
#crumbs { //whatever styles for the "you are here"? }
#crumbs .crumb { // style for individual crumbs }
#crumbs span img { display: none; }
<div id="crumbs">
You are here:
<span class="crumb">Item 1 <img src="arrow"></span>
<span class="crumb">Item 2 <img src="arrow"></span>
</div>
I didn’t bother to read any previous comments, so I’m probably repeating what someone has already said. I think it is A without a doubt simply because it invloves less code and an unstyled version will look almost identical (it’ll be horizontal) to a styled version.
I’m surprised more people haven’t said this, but in my mind it’s quite clear that a breadcrumb trail is an ordered list. It’s innately heirarchical – the first link is the first site level, and the rest should all follow the site architecture in this way.
I think the ideal solution would be:
<p>You are here:</p>
<ol>
<li><a href=”/”>Home</a></li>
<li><a href=”/articles/”>Articles</a></li>
</ol>
with something like the following CSS:
li {display: inline;}
li:before {content: “>”;}
li:first-child:before {content: normal;}
But seeing as the most widely-used browser today doesn’t come anywhere near supporting that, for practical purposes I would probably sigh, curse my internal markup geek for screaming so loudly, and choose A.
The nested ul and li tags are the only ones that are structurally correct. Doug has it right, as none of the A to D options are correct as they do not contain any of the proper relationships between the links in the breadcrumbs.
Marking up the nested lists is not the most straight forward, but Dreamweaver MX can help get this right if using the XHTML clean-up or convert.
ACJ, I believe LABEL is reserved for form elements.
Doug Baker, suggested (if I’d understand him correctly) that he would use D if we wanted to show “you are here”, but in A if we only wanted to show the breadcrumbs.
But, by using a definition list – like D – you could turn on/off the DT (“You are here”) in your style sheet
dt { display:none; }
This way you code is still “defined”. Of course this is just the way I would do it :)
Sorry, I meant to write C – not D – in my post above.
Matthew; I was talking about the
nlelement… in XHTML2, that is.ACJ
In terms of semantics, as long as they are links, in some sort of order, I think you’ve met that goal.
The greater-than symbol works fine as a symbol, but so would a ‘|’. Lists are fine as well.
But since we’re talking of semantics, I’d like to argue that we’re usually using the term breadcrumbs incorrectly. 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. These are not necessarily the same thing.
Breadcrumbs should follow you from page to page, and, personally, I actually find them useless on a web site (that’s what the forward/back menus in the browser are for). I propose we use something akin to ‘topic path navigation’ to refer to this sort of navigation that shows you where you are in the site structure.
C
Breadcrumb navigation is definitely not a list. Saying that “you are here” and putting a list of locations where you are at the same list level says that you are in all of these places at the same time when you are in fact in one which is in another which is in another.
The parallel to this would be object-oriented programming (or at least its single-inheritance flavor, ala Java.) A class inherits from only one superclass, which in turn inherits from its own superclass.
The solution is choice A. If for styling flexibility you are tempted to use a list, realize that it is better to wrap in meaningless
spans than to use misleading semantics.If any list is used, it would be a definition list with “you are here” as the term and the entire navigation tree in a single definition.
erm, i’ve been following these quizzes for a while now, and most of the time i agree with the masses, but i’m thinking that we’ve fallen a bit off track here.
ahem:
for breadcrumbs, nested lists are stupid, because each layer of nesting only contains a single item; if your nesting single items, why nest them in “lists”? further, it’s no more semantically correct; at least not in terms of the semantic meaning of a “list”, or the logical meaning of a “breadcrumb trail”.
I would have to go with the modified version of C presented by thomas… in other words:
A breadcrumb trail navigation defines (thus the dl) a list of links, in a specifc order (thus the ol), which the specify a path to a specific location (in the DT).
If I were to make any modification, i might put the DT at the end of the list:
<dl>
<dd>
<ol>
<li>Home</li>
<li>Archives</li>
<li>2004</li>
<li>February</li>
</ol>
</dd>
<dt>Today</dt>
</dl>
Doing this in the real world, on today’s browsers, I’d use A. If you twisted my arm and forced me to use a list solution, I’d use a single <ol> as first suggested by TOOLman.
Mountains of nested <ul>’s may be more semantically correct, but what actual use are they going to be? Once your CSS has styled your pile of tags back to look like a single > seperated list, most visitors will never see your semantic analness. The only people who will “see” it will be users of screen readers, who will probably find the results more confusing (due to all that intervening markup) than a single list.
One best things about using CSS is how clean the (X)HTML pages look once shorn of all that presentational markup. I’m not going to clutter them up again with “semantic” markup that serves no useful purpose to anybody.
B.
Uh, C is cool. I had never thought of that before.
A looks easy, but how do I control it?
Uh, D seems to have a better understanding of what a definition list is. Anyone still using
DFN? Maybe:<p>You are here:
<dfn><a>...</a> [separator of choice] <a>...</dfn></p>
I really like Thomas Baekal’s E. I might explore that.
I think Francois is right. You will have a reason to do whatever you choose to do. For the same reason that there are different browsers, there are different ways to do the markup.
I’ve been using breadcrumbs for years and think they’re an extraordinary navigation tool, but I’ve always struggled with how to represent them. My kneejerk reaction is to agree with France’s reasoning and Baekdal’s implementation if you’re using a label like “You are here” … and I’m excited about the possibility of using
<nl>lists when XHTML2 is ready, as suggested by ACJ. I’m concerned about how those<nl>lists will look unstyled, though, since Baekdal’s semantically similar<dl>with nested<ul>(or<ol>) solution requires a lot of CSS man-handling and bloated code for a rather unfortunate unstyled representation. Until this concern is resolved, I’m inclined to continue using option A. Yes, it’s a semantic compromise, but I don’t think it’s unreasonable for the time being.I also share Adam’s peripheral concern about unstyled content when you use consecutive lists for menus and breadcrumbs, in which case it’s imperative that you use Baekdal’s solution, which allows you to add labels for each list. You can always hide the
<dt>from the styled design, like he does in his example. Just my $.02 …Baekdal’s solution is quite interesting. If you haven’t looked at it, check it out.
Kinda funny that the guy (Baekdal) who prompted this SimpleQuiz seems to have the best implementation. While the unstyled appearance of nested
<ul>or<ul>lists leaves something to be desired, the semantic nature and styled representation really are pretty nice. Good job!A) doesn’t have any specific semantics, but it’s not incorrect.
B) and C) both imply that all levels in the hierarchy are equal. Especially C), since the <dt> ties the words “You are here” more closely to the links. It could be argued that since the “Articles” section is a part of the “Home” section, you really are in both sections at once, so I’m not going to say it’s incorrect, but it is semantically ambiguous.
D) is like A), but more semantic. I’m pretty liberal about the use of definition lists, but some might say this isn’t what it should be used for.
If you want to be as semantically specific as possible, and correct, an ordered list or a nested unordered list would both be good choices, as others have said.
Many like option C) for its semantics. I think C) is the worst option, especially if you care about semantics.
But of the available options, my choice would be either A) or D).
A, and use the correct right-arrow character as a separator: → (→).
To me, breadcrumbs are ‘steps’ you take to get to a page. ‘Step 1′, ‘step 2′, ‘step 3′, etc are a bunch of list items. And it’s definately an ordered list!
So I choose B. But would use <ol> instead of <ul>.
<h3 class="hide">How you got here:</h3><ol>
<li><a>Step 1</a></li>
<li><a>Step 2</a></li>
<li><a>Step 3</a></li>
<li><em>Here</em></li>
</ol>
Using <h3> or <p> isn’t important. What’s important is that you must define the heading (e.g. “How you got here:”) before the list items, so that screen-reader users can differenciate these are ‘steps’ from the ‘main menu/navigation’. I feel sometimes we underestimate what visually-impaired users can understand what we are trying to do. And because of this we often try to create the perfect semantical codes that are far too complex than it should be. And this certainly do not benefit anybody. My theory has always been that as long as we are clear and provide the right description of everything we display on the page, and keeping the semantical structure simple, it is actually more than fine for them to follow. It should be like reading a book to a child, rather than writing a thesis to impress your tutor. And for most of us who knows what a breadcrumb looks like, it up to you to ‘hide’ the heading from displaying as you wish.
And finally, I would use either a <strong> or <em> to highlight “Here” as the last item because from what I know, most screen-readers understand these tags to read out the emphasied texts in a louder volume or in some forms of emphasis.
That is a long and very poor way of doing this. I have a simple PHP script that will display the folder you are in and then the file name.
something like index > info > book > lord of the rings.
everything before the page you are on are links but the page you are on is displayed as text.
<?php
$crumbs = explode("/", $_SERVER['PHP_SELF']);
for ($i = 1; $i < count($crumbs); $i++) {
$link = "";
if ($i == (count($crumbs) - 1)) {
$link = explode(".", $crumbs[$i]);
$link = $link[0];
echo "<span style=\"font-weight: bold;\">" . $link . "</span>\n";
}
else {
or ($ii = 0; $ii <= $i; $ii++) {
$link .= $crumbs[$ii] . "/";
}
echo "<a href=\"" . $link . "\" class=\"dynNav\">" . $crumbs[$i] . "</a>/\n";
}
}
?>
My apologies if this has been said already;
My preference is to use optionB but with a bit of tweaking and nesting of ul’s, for example:
home
about
When unstyled the viewer is aware that there is a parent/child structure going on, and to me this is integral to a breadcrumb list. When styled i’d use a bgimage to put in the ” > ” and the class=”active” style would make the current page link bold. I’d love to hear arguments against this though, as im probably doing it wrong… :)
d’oh, for the above code please ignore and look at this:
<ul>
<li>home
<ul>
<li class=”active”>about</li>
</ul>
</li>
</ul>
———
oops. :)
The best way to do a breadcrumb trail is method ‘a’. I agree with Joe Clark that the → character should be used, except that IE5+ doesn’t support it. So what is the best solution? The greater-than symbol isn’t really appropriate, it’s just familiar. Images are silly. Perhaps just periods? For example “Home….Items….Chair”?
I would go with A. Lists suggest that each item within the same or are at the same level but in the breadcrumbs, you are showing a progression – as far as I am concerned, if lists are the way to go, then a series of single item nested lists may be closer to the structure of the content than a single list.
Several people have claimed that lists suggest an equal weighting of items. This is only true for unordered lists. Ordered lists have a clear weighting.
Nesting lists makes no sense for a true breadcrumb trail because each item is not a child of the preceding item; it merely follows that item.
Here’s a real-world (non-Web) example. In a couple of weeks I’m flying from Regina to Toronto to Ottawa. Ottawa is not a child of Toronto and Toronto is not a child of Regina so why should these be nested?
I’m a hack at web design, so take all this with a grain of salt…
I prefer “A”. I see the user’s current location in your site as more sequential than hierarchal. Lists are a bad fit.
Additionally, lists to me should contain content related to the current document, not choices the user has already made.
Personally, I’d try to style option “A” somehow to make it prettier, maybe with → like somebody suggested. That would c omplete the idea of a “sequence”.
It’s a WCAG Priority 3 checkpoint that links shouldn’t be seperated by only whitespace, 10.5 Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. [Quote Source], so that rules A out unless you take a route like Megatron suggested.
My view would be to nested ordered lists. If you think about it, Home -> Sections -> XML implies that you’re in the XML section, within the Sections section, from the home page. Dave Calam, they are children of each other, those pages are in folders which are nested in each other on the server.
I vote for none of them. I think semantical markupt should be France’s example. But lineal one is not bad, it’s sequencial like say, option 1, option 2.
Mine is: option → option → last.
I’m with Sean Ho on this. Ordered-list with a H* as the label. I particularly like the
<em>around the last item to indicate the current location.To me the foremost real world example of a series of bread crumbs in use is the common outline for term papers. Start with a thesis, map out the sections (usually using roman numerals), map out the subsections, the subsections within the subsections, etc.
What have you got? A series of (ordered) nested lists, of course. Not only does an outline display hierarchy, but it also tells you where you are within the paper.
However, I don’t think it’s really necessary to use an ordered list if there’s nesting involved, especially since there’s only one item per list, unlike a paper outline which usually has several listings. But it can be used.
I’m not sure if a single ordered list would work the same way, semantically. Usually when I encounter a single list of items I see them as being within the same hierarchy, and as a series of steps within the hierarchy. “2″ is not within “1.” “2″ comes after “1.”
So yes, despite the fact that A would be the easiest and use the smallest amount of code, I think the numerous suggestions for nested lists is the most semantically correct.
Hmmm…. interesting discussion. I think before you can think about how to display breadcrumbs, you first need to decide WHAT the breadcrumbs are. That answer will(should) then define how the semantices should be markedup. Then and only then should you use CSS to pretty-fy it.
First, breadcrumbs are not a you are here sign. I *know* where I am. I am on *this* page. It doesn’t matter where this page is. What matters is how did I get here? That’s what breadcrumbs were intended for. Did I come straight off of the home page? Did I click around, following links? It’s like following the bouncing ball.
If I start on the main page, click on a category, then a post, I should get this… Home > Category > Post Name. If I then click into January, I would expect to see this: Home > Category > Post Name > January. Now, depending on how many steps I want to track (5 seems like a good number), things can start to fall off the front of the list. There’s no need to track EVERYWHERE I’ve been, but having the last 4 or 5 places I was would be real handy.
Home > Category > Post Name > January > Jan 20
Category > Post Name > January > Jan 20 > Post Name
Post Name > January > Jan 20 > Post Name > Home
January > Jan 20 > Post Name > Home > Category
It’s a trail of where I’ve been. And it allows me to get back to some point where I was.
Breadcrumb navigation is commonly used as a method for showing the user where they are within the structure of a site — and giving them an easy way of getting back. — I think that’s only half of it. Letting me know where I am in the structure of a site is part of the usability of a site, but it doesn’t allow me to get back to where I might have been. A breadcrumb that does not make.
The second second part of that statement says that I should be able to get back to where I was. Within the structure of the site, that is immaterial. I shouldn’t care structuraly where I was. I just want to go there. So, I follow the breadcrumbs back two steps to a different part of the structure tree. The You Are Here (YAH) should update and show me my new location.
That’s my 2cents, take it or leave it. It’s also jsut my opinion.
TG
Forgot to mention. With all this in mind, I would use an unordered list, probably displayed inline, no bullets (well, maybe) and some kind of textual arrow, like this “->”.
TG
TechGnome — why not use the browser’s back button (and the associated list of previous pages’ titles) for that?
I agree with TechGnome. Most if not all breadcrumb lists do not actually show you from whence you have come, they only really show you which ‘folder’ you are in. I suppose that with a dash of PHP and a session ID it may be possible to construct a more meaningful breadcrumb trail (or segment of said trail as TechGnome suggests) (?).
As for the markup (and after having read this article) I would vote for a nested ordered or unordered list, but only because I have no real understanding of the correct usage of definition lists =P
B !! A list makes sense here.