I guess I will need a list of pages and their addresses, though it would be nice to generate this automatically.
Likewise I guess I will have to add code to pages individually.
3 answers
point
Use an unordered list like so:
<ul id="crumbs">
<li><a href="/">Home</a></li>
<li><a href="/trail01">Trail #1</a></li>
<li><a href="/trail01/trail02">Trail #2</a></li>
<li>Current page</li>
</ul>
With some styling, maybe:
#crumbs li {
list-style: none;
float: left;
margin: 0 1em 0 0;
}
#crumbs li:before {
content: 'ยป ';
}
Try to make the active state of the current page crumb very clear, like the above one that removes the anchor element from it entirely.
I've found it best to use an arrow like separator to create a visual forward movement between the crumbs to indicate travel/trail/navigation. I've used CSS content genration here for simplicity but you could use a background image instead (the above solution SHOULD include a fallback for those not supporting content generation anyway).
Remember, with breadrcumbs it's all about leaning on convention and good placement to avoid mix up with the site navigation and make it crystal clear to use (don't make them think! ;) )
- It is stupendous to get an expert answer like this so quickly!
- That's what we're here for ;)
point
Jens has given you a perfectly sensible 'manual' solution, but depending on the platform you are using, you might have some existing tools at your disposal.
For example, there are various ASP.NET controls available that help automate this, and many AJAX environments have Breadcrumb capabilitys (jQuery alone has half a dozen plugins that may help).
Many of these tools can not only help automate the rendering of HTML, but can automatically generate the breadcrumb from the hierarchical position of the page.
Of course, there is absolutely no problem with doing it manually - especially if you only have a small number of pages.
points
"I guess I will need a list of pages and their addresses..." sounds like you are planning a site; it's much easier to plan ahead then go back and fix and add features you find you need.
If you build on a CMS, breadcrumbs are very easy to deal with, either as part of the default system or as a plugin, among other advantages.
