Recipe 6.10. Creating Breadcrumb Navigation

Problem

You want to use a nesting listing like the one in Figure 6-14 to create a line of breadcrumb navigation links, which is a set of links that lead back to the home page (see Figure 6-15).

Figure 6-14. The default rendering of the nested listing

Figure 6-15. The breadcrumb trail

Solution

The first step is to create a properly constructed set of nested, unordered links that represent the page's location in the site:

<div >  <h3>Location:</h3>  <ul>  <li><a href="/">Home</a>   <ul>    <li><a href="/writing/">Writing</a>     <ul>      <li><a href="/writing/books/">Books</a>       <ul>        <li><a href="/writing/books/">CSS Cookbook</a></li>       </ul>      </li>     </ul>    </li>   </ul>  </li> </ul> </div>

Now set the display property of both the ul and the li of the lists:

#crumbs {  background-color: #eee;  padding: 4px; } #crumbs h3 {  display: none; } #crumbs ul {  display: inline;  padding-left: 0;  margin-left: 0; } #crumbs ul li {  display: inline; } #crumbs ul li a:link {  padding: .2em; }

Within each nested list, place a small background image of an arrow to the left of the link:

crumbs ul ul li{  background-image: url(arrow.gif);  background-repeat: no-repeat;  background-position: left;  padding-left: 12px; }

Discussion

Based on the fairy tale, "Hansel and Gretel," a breadcrumb trail is used to help people find their way home. On the Web, the breadcrumb trail illustrates a path to the page the user is viewing (see Figure 6-16).

Figure 6-16. An example of a breadcrumb trail

The solution could drop the background-image property if more browsers supported the :before pseudo-element. The solution would then incorporate another CSS rule (see Recipe 8.9), like so:

#crumbs ul ul li:before {  content: url(arrow.gif); }

As of this writing, only Firefox, Safari, Netscape Navigator 6+, and Opera 5+ support the :before pseudo-element.