Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > What is the best markup for a breadcrumb navbar?

Reply
Thread Tools

What is the best markup for a breadcrumb navbar?

 
 
Thomas Mlynarczyk
Guest
Posts: n/a
 
      01-13-2004
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



 
Reply With Quote
 
 
 
 
Disco Octopus
Guest
Posts: n/a
 
      01-13-2004
Thomas Mlynarczyk wrote:
> 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.




 
Reply With Quote
 
 
 
 
Lauri Raittila
Guest
Posts: n/a
 
      01-13-2004
In article Thomas Mlynarczyk wrote:
> 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.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      01-13-2004
Thomas Mlynarczyk wrote:

> 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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      01-14-2004
On Tue, 13 Jan 2004 22:10:46 +0100, "Thomas Mlynarczyk"
<(E-Mail Removed)> wrote:

>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>
&raquo; <a href="./" title="Timber Framing" >Timber Framing</a>
&raquo; <a href="gallery.htm" title="Timber Framing Gallery"
>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.



--
Socialism: Eric, not Tony
 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      01-14-2004
Lauri Raittila wrote:

> In article Thomas Mlynarczyk wrote:
>> 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.


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
****.
none of your tags are valid html.


 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      01-14-2004

"Richard" <anonymous@127.000> wrote in message
news:(E-Mail Removed)...
> Lauri Raittila wrote:
>
> > In article Thomas Mlynarczyk wrote:
> >> 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.

>


> 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
> ****.


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:

<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.


 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      01-14-2004
In article Toby A Inkster wrote:
> Thomas Mlynarczyk wrote:
>
> > 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>

[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.




--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

 
Reply With Quote
 
Thomas Mlynarczyk
Guest
Posts: n/a
 
      01-16-2004
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


 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      01-16-2004
Thomas Mlynarczyk wrote:

> 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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
ASP.NET 2.0, Breadcrumb (SiteMapPath) and TreeView on same page Mark ASP .Net 3 10-03-2005 10:14 PM
Problems with breadcrumb control using Sitemap datasource =?Utf-8?B?QXR1bCBCYWhs?= ASP .Net 0 08-24-2005 09:59 PM
how do I create a breadcrumb trail? TG ASP .Net 1 09-29-2004 09:38 PM
BreadCrumb Trail Simon Harris ASP .Net 2 06-26-2004 09:05 PM
Breadcrumb scripts Deryck HTML 3 06-26-2004 12:53 PM



Advertisments