Feature
Post

Category
Code


CSS Breadcrumbs In 5 Minutes

Breadcrumbs, which always make me think of Hansel & Gretel using them to find their way back home, are a useful addition to any website, especially ones with levels and sub-levels of content. Not so long ago, I posted about adding breadcrumbs to your WordPress blog, and today I want to talk about the styling of breadcrumbs with CSS. It’s incredibly easy, and I’ve included the files for download at the end of this post.

Here’s a screenshot of how I want my breadcrumbs to look:

I’m going to show you how to do this quickly and painlessly. Now, the best coding for breadcrumbs is also the simplest: use an unordered list, like so:

<ul id="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Major Page</a></li>
<li><a href="#">Sub Page</a></li>
<li>Current Page</li>
</ul>

Unstyled, this looks like this:

The magic snippets are:

ul, li { list-style-type:none; padding:0; margin:0; }

This gets rid of padding and margin, and removes any default bullets- basically resetting your list, giving you a clean slate to work with.

#breadcrumbs { border-bottom:1px solid #ccc; background-color:#fff; line-height: 20px; overflow:auto; font-size:11px; font-weight:bold; }

This creates a light gray border at the bottom, sets the height, and the font details.

#breadcrumbs li { float:left; padding-left:8px; }

Here, you’re floating each list element, so that they line up, like so:

Now the fun part:

#breadcrumbs li a { padding:0 24px 2px 0; background:transparent url(blue-arrow.png) no-repeat right center;}
#breadcrumbs li a:link, #breadcrumbs li a:visited { text-decoration:none; color:#003366; }
#breadcrumbs li a:hover, #breadcrumbs li a:focus { text-decoration:underline; color:#0099CC; }
#breadcrumbs li {color:#FF9900;}

The arrow graphic is presented as a background image- the rest of the styles are link styles, as well as the color orange (#FF9900) for the non-linked text (i.e. the Current Page). And voila:

Yes, it’s that easy. Play around with different images and colors and borders to find a style to best fit the rest of your site. You can also download the files (png and html) I used here to use and/or refer to.

That was less than 5 minutes, wasn’t it?


  1. By Victoria Blount posted on May 18, 2010 at 8:19 am
    Want an avatar? Get a gravatar! • You can link to this comment

    This is a great handy guide to a quick neat and simple use of breadcrumbs controlled by css. I will definitely put this into practice the next time i develop a large website that requires breadcrumbs.

  2. By Lorraine Nepomuceno posted on May 18, 2010 at 5:49 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks, Victoria! I’m glad you liked the guide.

  3. By George Lucas posted on May 18, 2010 at 8:38 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for this, have bookmarked it to remember!

  4. By Lorraine Nepomuceno posted on May 19, 2010 at 11:08 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks, George! Glad you like the post.

  5. By Rick Faircloth posted on May 19, 2010 at 3:08 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi, George…

    I was disappointed that this is not a true breadcrumb trail (at least not as I was thinking it would be). I was hoping for a trail that shows actual pages navigated and not just the tree hierarchy of the current page.

    Is my view on this correct?

    I could modify this with jQuery to get a an trail of pages visited, but thought, somehow, you had managed to create an actual breadcrumb trail, somehow, just in CSS.

    Thanks for the work, however, and any feedback!

    Rick

  6. By Patrick Ryan posted on May 22, 2010 at 10:15 am
    Want an avatar? Get a gravatar! • You can link to this comment

    @Rick Faircloth,

    You’re referring to historical breadcrumbs, rather than structural ones – see http://quince.infragistics.com/Patterns/Breadcrumbs.html for an explanation.

    In my experience, structural breadcrumbs are far more common than historical.

  7. By Kivi Shapiro posted on May 25, 2010 at 7:33 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    The same styling technique can be used for historical breadcrumbs or for structural ones, or even for random lists of links: CSS doesn’t know the difference.

    Definitely slick.

  8. By Tulsi Dharmarajan posted on May 25, 2010 at 10:31 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi,
    A little while ago I wrote a short blog post about using lists for all sorts of things!
    This may be of interest to folks!
    http://tulsid.wordpress.com/2010/04/15/css-lists-galore/

    Tulsi

  9. TrackbackCSS Breadcrumbs In 5 Minutes | Devlounge | My BlogCooking Made Really Easy