page wide bread crumb bar as at apple.com/store

Posted by punkish on Stack Overflow See other posts from Stack Overflow or by punkish
Published on 2010-06-13T23:38:13Z Indexed on 2010/06/13 23:42 UTC
Read the original article Hit count: 448

Filed under:
|

I want to build a (don't know what to call it other than) bread crumb bar at the top of the page, kinda like at http://store.apple.com/us/browse/home/shop_mac/software, y'know, at the top of the page, the horizontal, light grey bar that looks like so

[home icon] | Shop Mac | Mac Software                     Help | Account | Cart

Actually, I've got that bar working, with a curved, square left edge, the intermediate chevrons, and the curved, square right edge. So, my bar looks like so

[ Home > Foo > Bar > Baz ]

I have little graphics fragments that make up the [ and the > and the ] and the middle parts. The only problem is, I want the right edge to be at the right edge of my page. So, the above bar should look like so

[ Home > Foo > Bar > Baz                                                      ]

I want to have a variable number of entries in my bread crumb bar... so, I could have "Home, Foo, Bar, Baz" or I could have "Home, Foo" or "Home, Foo, Bar, Baz, Qux" and so on. In other words, I want the right edge of my bar to be dynamically long enough to extend to the edge of my web page.

Suggestions?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css