What is the best markup for a breadcrumb navbar?

[Thomas Mlynarczyk]

Hi,

I've been wondering what the *perfect* markup for a breadcrumb navbar like
"World > Europe > France > Paris" should be. Some suggest nested lists
(<ul>) with one item each, and indeed this seems to be the only logical
solution, but it looks a bit awkward as code and is difficult to style for
all browsers with CSS. Moreover, a list of one item is not exactly a "real"
list, so the only argument for nested lists would be the implied
hierarchical order of the items, indicating that "Paris" is a part of
"France" which is a part of "Europe" which is in turn a part of the "World".

Any comments on this subject?

Greetings,
Thomas

 

[Disco Octopus]

Hi,

I've been wondering what the *perfect* markup for a breadcrumb navbar
like "World > Europe > France > Paris" should be. Some suggest nested
lists (<ul>) with one item each, and indeed this seems to be the only
logical solution, but it looks a bit awkward as code and is difficult
to style for all browsers with CSS. Moreover, a list of one item is
not exactly a "real" list, so the only argument for nested lists
would be the implied hierarchical order of the items, indicating that
"Paris" is a part of "France" which is a part of "Europe" which is in
turn a part of the "World".

Any comments on this subject?

Greetings,
Thomas

Why not try to leave it to the viewer (sort of) and put it simply as
<a>s....

<a href="a">a</a> &your_char_here; <a href="b">b</a> &your_char_here; <a
href="c">c</a> &your_char_here; <a href="d">d</a>

thats what I think your markup should be.

pardon me.

give them a class, or put a style around them to make them look pretty.

 

[Lauri Raittila]

Hi,

I've been wondering what the *perfect* markup for a breadcrumb navbar like
"World > Europe > France > Paris" should be.

<navigation type="breadcrumb">
<level>World </level>
<level>Europe<level>
<level>France</level>
<level>Paris </level>
</navigation>

with
level:after {content:">";}

Problem is, that it is not part of HTML.

Some suggest nested lists
(<ul>) with one item each, and indeed this seems to be the only logical
solution, but it looks a bit awkward as code and is difficult to style for
all browsers with CSS.

And it will look really stupid with non CSS browser, and I doubt
structure has any help for blind either:

* World
* Europe
* France
* Paris

Lots of unnecessary white space.

Moreover, a list of one item is not exactly a "real"
list,

Yes, how can you have list, if you only have one list item?

so the only argument for nested lists would be the implied
hierarchical order of the items, indicating that "Paris" is a part of
"France" which is a part of "Europe" which is in turn a part of the "World".

I would propably just do

<div class="breadcrumb">World > Europe > France > Paris</div>

Maybe using :: or : or middot etc. instead greater than though.

 

[Toby A Inkster]

I've been wondering what the *perfect* markup for a breadcrumb navbar like
"World > Europe > France > Paris" should be.

Nested lists are a good solution, and they're what I used to do. They also
allow you to add in the "children" of the current page easily.

e.g.

<ul>
<li>World
<ul>
<li>Europe
<ul>
<li>France
<ul>
<li id="youarehere">Paris
<ul>
<li>Art Galleries</li>
<li>Hotels</li>
<li>Restaurants</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

(<a> elements omitted for brevity).

Although currently I'm just sticking them in a paragraph and being done
with it.

 

[Andy Dingley]

I've been wondering what the *perfect* markup for a breadcrumb navbar like
"World > Europe > France > Paris" should be.

I use this:

<div class="breadcrumbs"><a href="/" title="Homepage" >Home</a>

Gallery</a></div>

I see no sense in regarding these as any form of list, and a hirearchy
of lists is even sillier. The above example also degrades perfectly
reasonably if there's no CSS.

 

[Richard]

<navigation type="breadcrumb">
<level>World </level>
<level>Europe<level>
<level>France</level>
<level>Paris </level>
</navigation>

with
level:after {content:">";}

Problem is, that it is not part of HTML.

Now who's the asshole who shouldn't be listened to?
You go through this trouble to demonstrate your point you don't know jack
shit.
none of your tags are valid html.

 

[rf]

Now who's the asshole who shouldn't be listened to?
You go through this trouble to demonstrate your point you don't know jack
shit.

You really are a most incredibly stupid bloody idiot. I think I will go back
to harass mode on you, there is nothing at all to be gained by treating you
as anything other than an imbecelic troll.

none of your tags are valid html.

You? Talking about valid HTML? This is the best joke this year.

Did you even understand the disclaimer at the end of the bit of Lauri's post
that you even quoted? She said, and I too will quote:

Problem is, that it is not part of HTML.

</quote>

There it is. She states herself that the stuff up the top is a fabrication,
a nice one but, to quote "not part of HTML".

And then you respond with your usual misguided drivel. No wonder everybody
all over the macroscopic usenet treat you with all the respect they would
affort an offensive dog turd they have just stepped on.

Do us all a favour and **** off, there's a good chap.

BTW you mispelt arsehole!

Cheers
Richard.

 

[Lauri Raittila]

Nested lists are a good solution, and they're what I used to do. They also
allow you to add in the "children" of the current page easily.

e.g.

<ul>
<li>World
<ul>
<li>Europe
<ul>
<li>France
<ul>
<li id="youarehere">Paris
<ul>
<li>Art Galleries</li>
<li>Hotels</li>
<li>Restaurants</li>

[snip end tags]

This might make some sence if there really is children, but I still don't
like it. You have list of things, like world, mars and venus, and each of
them has sublists. But is it correct markup to mark up one item of list
as list?

Although currently I'm just sticking them in a paragraph and being done
with it.

Why are you putting it in paragraph? That is certainly wrong way to do
it. It's certain that
"World > Europe > France > Paris"
don't fit to any definition of paragraph. And it breaks when you have
browser that makes some use about info that it is paragraph. For example
it can show paragraphs in ideal width, or it can pronounce > as "greater
than" instead of something else in context.

 

[Thomas Mlynarczyk]

Thank you all for sharing your opinions. So basically, it's either nested
one-item lists or simple links with a separator char. I was hoping someone
might suggest a third solution combining the advantages of the other two
(implied hierarchical order vs. simplicity) while removing the disadvantages
(rather complex markup vs. no hierarchy implied). Doesn't the W3C have any
recommendation about this matter?

Greetings,
Thomas

 

[Toby A Inkster]

Thank you all for sharing your opinions. So basically, it's either nested
one-item lists or simple links with a separator char. I was hoping someone
might suggest a third solution combining the advantages of the other two
(implied hierarchical order vs. simplicity) while removing the disadvantages
(rather complex markup vs. no hierarchy implied).

Well, you could always do something like:

<div id="bread">
<span>
<a href="world" rel="top">World</a> &rarr;
<span>
<a href="europe">Europe</a> &rarr;
<span>
<a href="france" rel="up">France</a> &rarr;
<span id="youarehere">Paris</span>
</span>
</span>
</span>
</div>

This certainly suggests a hierarchy of some kind.

Doesn't the W3C have any recommendation about this matter?

HTML 4.x and XHTML 1.x is fairly limited in navigational elements. XHTML 2
will have better navigation elements.

 

[Thomas Mlynarczyk]

Also sprach Toby A Inkster:

Well, you could always do something like:

<div id="bread">
<span>
<a href="world" rel="top">World</a> &rarr;
<span>
<a href="europe">Europe</a> &rarr;
<span>
<a href="france" rel="up">France</a> &rarr;
<span id="youarehere">Paris</span>
</span>
</span>
</span>
</div>

This certainly suggests a hierarchy of some kind.

In the same sense in which "h1" suggests a first level heading? Nested
<span>s could be used for anything...