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.

screenshot

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

In head element:

Example 10.55 Rendered: