## Breadcrumb Navigation

> "Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.", Hansel in Hansel and Gretel

Markup "breadcrumb" navigation using nested lists so that markup reflects the parent/child or hierarchy relationship.

Strategy is similar to that of creating tabs. Use "display: inline" to make list items inline; use background image for "li" to show arrow.

Example 10.55
Example 10.55 Source:
<div id="breadcrumb" > <ul> <li> <a href="http://dmoz.org/" shape="rect" >Top</a> <ul> <li> <a href="http://dmoz.org/Science/" shape="rect" >Science</a> <ul> <li> <a href="http://dmoz.org/Science/Biology/" shape="rect" >Biology</a> <ul> <li> <a href="http://dmoz.org/Science/Biology/Genetics/" shape="rect" > Genetics</a> <ul> <li> <a href="http://dmoz.org/Science/Biology/Genetics/Genomics/" shape="rect" > Genomics</a> <ul> <li> <span>Pharmacogenetics</span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
In example55.css
/* Order of pseudo-"a" elements: LoVe HAte (Link, Visited, Hover, Active */ #breadcrumb a:link , #breadcrumb a:visited , #breadcrumb a:hover , #breadcrumb a:active , #breadcrumb li span { color: navy; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: small; font-weight: normal; padding: 0.5em; text-decoration: none; } #breadcrumb a:hover { text-decoration: underline; } #breadcrumb li span { color: black; } #breadcrumb { background-color: #ddd; } #breadcrumb ul { display: inline; margin-left: 0; padding-left: 0; } #breadcrumb ul li { display: inline; } #breadcrumb ul ul li { background-image: url(images/arrow.gif); background-position: left; background-repeat: no-repeat; padding-left: 25px; }
In head element:
<link rel="stylesheet" type="text/css" href="example55.css"/>
Example 10.55 Rendered:

- With Styles
- Without Styles