Crumbtrail Navigation

by @jehiah on 2004-09-24 13:26
Filed under: All, CSS, HTML

Here is the simple way to do a crumbtrail navigation with an unordered list and CSS.

Example

Home
Blog
Crumbtrail Navigation

HTML Code

<ul id="crumbtrail">
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li>Crumbtrail Navigation</li>
</ul>

CSS Code

<style>
@media screen{
    #crumbtrail {margin: 0; padding: 0; list-style: none;}
    #crumbtrail li {background: url("/images/breadcrumb.gif") 2px 50% no-repeat; display: inline; padding: 0 0 0 11px;margin: 0; color: #666666;}
    /* #crumbtrail li:before{content:"> ";} */ /* this would work in moz */
}

@media print{ 
    #crumbtrail {display:none;}
}
</style>