I was wanting a new bread crumb bar for my site CodeConsortium and i spent considerable time looking for a pre made solution that did the following:

1. Used no images at all including background images
2. Tag shaped and overlapped like in the google style on their docs pages
3. Used very lean and semantically correct HTML

After failing to find anything on google, i decided i would need to write my own and so i did just that. One of the things i found was that most of the bread crumbs i found either used background images, or used psuedo-selectors to fake the triangular end which unfortunately was being done using the border trick instead of the rotation trick. Those using the rotation however were bland as they could not use images, and did not use gradients to make it all stylish.

The solution i came up with is to use the psuedo div (:before and :after) at a -45 degree angle and use a proportionally rotated gradient to match that of the main crumb. It was very tricky but here is what i came up with looks like:

and when you hover over a section:

Not bad huh? The last section is indented to convey that it is the current milestone along the path of bread crumbs.

After deciding that the best balance between lean html and a semantically correct bread crumb navigation would be to use just an ordered list inside a nav element, i came up with the following html:

Thats fairly lean, and still reasonably ‘semantically correct’. Now to add the CSS to style this puppy:

Oh one note, i have not tested this yet in IE (sorry), but if you do find an issue in IE, or you can improve upon this in some small way, let me know and ill fix it.