CSS Cookbook-Recipe 3.9 Creating Breadcrumb Navigation

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.