Breadcrumbs are a common navigational aid for complex sites. They can be useful, but they aren't as simple as they may seem, especially for a site that has dynamically-generated pages. Here's a few ways to approach them.

The Path, or the Position?

Taken literally, you could think of breadcrumbs as showing you the path back to from whence you came -- a literal reversing of your clickstream. This can be useful, but it isn't what most breadcrumbs do. Because the web is stateless, when you get to a page, that page doesn't know how you got there. You can implement this effect using a cookie, into which you store each page as the user navigates, and render the breadcrumbs from the cookie. You'll need to define some top-level pages as ones that reset the cookie, so the breadcrumbs don't show your wanderings through the entire site, up and down.

This is certainly possible, but it is not the approach we're taking here. Rather, we'll describe how to create breadcrumbs that show the current position within a hierarchy of pages. There are two ways that such hierarchies can be created in Webvanta:

1. A hierarchy of pages, created as sub-pages and sub-sub-pages in the page admin.
2. A hierarchy of categories, as defined by the database category structure.

Breadcrumbs for Page Hierarchies

If you have carefully set up your pages in a hierarchy, show the place in the page hierarchy with breadcrumbs can be helpful. Note that if there are multiple paths to a page, as is usually the case, such breadcrumbs don't necessarily show the path taken to reach a page.

We can access the parent of the current page using the <w:parent /> tag, and once in the context of that page, we can get its title (<w:title />) and URL (w:url />) easily enough. These tags, combined with a little recursive trickery and some judicious use of floats, can give us the crumbs we seek.

First, the heart of the matter -- this is a snippet which must be called "page-crumb" for this to work:

         <w:if_parent>         
           <w:parent>
             <w:if_parent>
               <span><a href="<w:url  />"><w:title /></a> > </span>
               <w:snippet name="page-crumb" />
             </w:if_parent>
           </w:parent>
         </w:if_parent>

This snippet first check to see if there is a parent of the current page, and if so, it accesses that parent. It then check to see if this new page in turn has a parent, and we proceed only if it does. This is to exclude the home page from the list, as all pages are technically children of the home page; you can remove this second <w:if_parent> if you want to include the home page.

Then we create the link to the title of the parent page. We wrap it in a span for formatting, as well see shortly. And then we invoke the snippet again, from within the snippet -- this is what makes it recursive. The snippet will repeatedly call itself until there are no more parents to be had.

Now for the outer snippet, which you can call "breadcrumbs" or whatever you like:

      <style>
        .crumbs {float:left;}
        .crumbs span {float:right;}  
      </style>
      
      <div class="crumbs">
        <span><w:title /></span>
        <w:snippet name="page-crumb" />
      </div>

This snippet sets up a couple styles (which you may want to move to your css file), and then first provides the title of the current page, to which we don't want to have a link because that would just link to itself. Then we call the page-crumb snippet, which recursively calls itself to generate the full breadcrumb trail.

Note that the styles set each of the individual crumbs to float:right, since we're starting at the end of the list and working our way back toward the start. Then we float:left the entire div, to move the list over to start at the left edge of the page.

Category-Based Breadcrumbs

This page-based approach falls apart if you are using dynamically generated pages, in which a single page may represent a variety of different categories or items, depending on what parameters have been passed to it. In this case, you need to craft the breadcrumbs based on your particular information architecture.

If you have hierarchical categories and are on a category page (or otherwise in a context in which the category has been set), then the following will display the category hierarchy as breadcrumbs, ending with the name of the current category:

    <div class='crumbs'>
      <w:each relative='reversed-parents'>
        <a href='<w:path />'><w:name /></a> >
      </w:each>
    </div>