Recipe 3.9 Creating Breadcrumb Navigation

Problem

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

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

Figure 3-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 id="crumbs">

 <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 (as shown in Figure 3-16).

Figure 3-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 Netscape Navigator 6+ and Opera 5+ support the :before pseudo-element.