Generally, breadcrumbs trails are made with the following markup:
<div id="breadcrumbs"> <a href="#">Home</a> > <-- Other links --> Current section </div>
Wrong, totally wrong and completely non-semantic, because it doesn't resemble the tree hierarchy of the directories. Here's a better approach:
<ul id="breadcrumbs"> <li><a href="#">Home</a> <ul> <li><! -- Another link --> <ul> <li><strong>Current section</strong></li> </ul> </li> </ul> </li> </ul>
That's semantic, instead and here's how we can stylize it with CSS:
#breadcrumbs { margin: 0; padding: 0; list-style: none; } #breadcrumbs li, #breadcrumbs ul { margin: 0; padding: 0; list-style: none; display: inline; } #breadcrumbs li a { padding-right: 0.4em; margin-right: 0.3em; background: url("img/arrow-right.gif") no-repeat 100% 0; }
That's it. Hope that helps!