CSS3 Breadcrumb Navigation

While designing a website for a client, I needed to include a breadcrumb navigation to easily browse a product list. To tie in with the rest of the website the breadcrumb navigation would use gradients for the background and rounded corners.

The Process

The website in question did not need any images for styling, this was a feature I wanted to hang on to. After reading Breadcrumb Navigation with CSS Triangles, by Chris Coyier, a great idea struck me: why not use a CSS transform to create the corners. Not only will I be able to use CSS gradients for the background, but the points of the arrows will be click-able as well.

After some quick maths and a bit of debugging I came to a pretty decent solution. See the fiddle.

Mark It Up

<nav>
    <ul>
        <li>Current</li>
        <li><a href=""><span>Parent</span></a></li>
        <li><a href=""><span>Grandparent</span></a></li>
        <li><a href=""><span>Grandparent</span></a></li>
    </ul>
</nav>​

Give It Some Style

Here is the necessary CSS required to pull off the effect. (Vendor prefixes stripped for brevity.)

nav {
    border: 1px solid #bbb;
    font: 14px/1 "Myriad Pro", Arial, Helvetica, Tahoma, sans-serif;
    height: 30px;
    overflow: hidden;
    margin: 80px;
}
ul {
    float: left;
}
ul li {
    float: right;
    padding: 8px 0;
}
ul li:last-child {
    margin-left: -15px;
}
ul li a {
    background: white;
    border: 1px solid #ccc;
    display: block;
    margin-top: -60px;
    padding: 60px 0;
    transform: rotate(45deg);
    width: 132px;
}
ul li a span {
    display: block;
    transform: rotate(-45deg);
}​

Conclusion

I decided this wasn't bullet-proof enough to make the cut for production. However, I used this code to as a base for what eventually did.

Pros

  • Segment can have borders
  • Segments are clickable to the edge
  • No images
  • Falls back well for older browsers

Cons

  • Not 100% semantic
  • The list-items are in reverse order
  • Segments have a manually specified width

0 Responses

Leave a Response

Cancel reply
Google+