What is the best markup for a breadcrumb navbar?

Discussion in 'HTML' started by Thomas Mlynarczyk, Jan 13, 2004.

  1. 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
     
    Thomas Mlynarczyk, Jan 13, 2004
    #1
    1. Advertising

  2. 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.
     
    Disco Octopus, Jan 13, 2004
    #2
    1. Advertising

  3. 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.
     
    Lauri Raittila, Jan 13, 2004
    #3
  4. 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
     
    Toby A Inkster, Jan 13, 2004
    #4
  5. Thomas Mlynarczyk

    Andy Dingley Guest

    On Tue, 13 Jan 2004 22:10:46 +0100, "Thomas Mlynarczyk"
    <> 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
     
    Andy Dingley, Jan 14, 2004
    #5
  6. Thomas Mlynarczyk

    Richard Guest

    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
    shit.
    none of your tags are valid html.
     
    Richard, Jan 14, 2004
    #6
  7. Thomas Mlynarczyk

    rf Guest

    "Richard" <anonymous@127.000> wrote in message
    news:...
    > 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
    > 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:

    <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.
     
    rf, Jan 14, 2004
    #7
  8. 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.
     
    Lauri Raittila, Jan 14, 2004
    #8
  9. 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
     
    Thomas Mlynarczyk, Jan 16, 2004
    #9
  10. 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
     
    Toby A Inkster, Jan 16, 2004
    #10
  11. 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...
     
    Thomas Mlynarczyk, Jan 17, 2004
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Simon Harris

    BreadCrumb Trail

    Simon Harris, Jun 26, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    2,624
    Simon Harris
    Jun 26, 2004
  2. TG
    Replies:
    1
    Views:
    3,251
    Hermit Dave
    Sep 29, 2004
  3. Elmo Watson

    Repeater with SubRepeater for Navbar

    Elmo Watson, Mar 27, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    491
    Elmo Watson
    Mar 27, 2005
  4. =?Utf-8?B?QXR1bCBCYWhs?=

    Problems with breadcrumb control using Sitemap datasource

    =?Utf-8?B?QXR1bCBCYWhs?=, Aug 24, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    1,841
    =?Utf-8?B?QXR1bCBCYWhs?=
    Aug 24, 2005
  5. Mark
    Replies:
    3
    Views:
    3,372
    clintonG
    Oct 3, 2005
Loading...

Share This Page