Recipe 3.9 Creating Breadcrumb Navigation

‚ < ‚ Day Day Up ‚ > ‚

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(/books/3/26/1/html/2/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(/books/3/26/1/html/2/arrow.gif); }

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