Dynamic Drive CSS Library- CSS Breadcrumbs

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Links & Buttons: Here

CSS Breadcrumbs

Author: Dynamic Drive

Breadcrumbs is a term used to describe hierarchical links that tell the visitor where he/she currently is on your site. Visually breadcrumbs are just links with some sort of separator between them, such as a bullet image. This CSS code transforms ordinary looking links into a breadcrumb by giving each link a background image.

There are many different ways to implement breadcrumbs in CSS. Ideally the separator image should not even be part of the link, but dynamically inserted using CSS Generated content. However, since IE6 does not support generated content, that's not feasible at the moment. Then there's the debate over whether breadcrumbs should be implemented as a list, which I personally think is no more appropriate than just using regular <a> elements.

Demo:

The bullet image:

The CSS:

<style type="text/css">

.breadcrumb{
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.breadcrumb a{
background: transparent url(media/breadcrumb.gif) no-repeat center right;
text-decoration: none;
padding-right: 18px; /*adjust bullet image padding*/
color: navy;
}

.breadcrumb a:visited, .breadcrumb a:active{
color: navy;
}

.breadcrumb a:hover{
text-decoration: underline;
}

</style>

The HTML:

<p class="breadcrumb"><a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.dynamicdrive.com/style/">CSS</a> here</p>

<p class="breadcrumb"><a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.dynamicdrive.com/style/">CSS</a> <a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal Menus</a> Here</p>

Code Info

Rate this code:

Date Posted: 05/11/2006

Revision History: None

Usage Terms: Click here

Your Comments (44)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 3 of 4 pages < 1 2 3 4 >

This is just a manual way of doing breadcrumbs, I like.

I am glad that this was created - it shows that dynamic isn't always the answer.

Cheers

Posted by M. Dubb on 05/09, 01:49 AM

Nice one. easy to use. i am looking for this kind of breadcrumbs. Thanks a lot :)

Posted by Css Freelancer on 06/25, 12:51 PM

It's simple to use and perfect! Thank you!

Posted by Jinglebelle on 08/07, 01:29 PM

It does'nt seem work in Internet Explorer 8 (beta)..

Posted by Bas Janssen on 10/13, 05:46 AM

I can see that you are putting a lot of time and effort into your blog and detailed articles! I am deeply in love with every single piece of information you post here. Will be back often to read more updates!
Car Hire Majorca Airport

Posted by Car Hire Majorca Airport on 10/25, 12:20 AM

I like the javascript Posted by illovich on 11/24, 08:51 PM.. Very simple.. Easy to use and works like a charm

love the html one as well...perfect for styling

Posted by BlueBox Designs on 11/08, 01:43 PM

I'm working with breadcrumbs on a CMS Made Simple template. I'm trying to get a phone number to right align in the breadcrumbs under the header but text-align is not taking. I get get padding to adjust, but then the text moves around (obviously) with each page. I believe the text-align in the CSS is overwriting my code but I'm not sure what adjustments to make. Here is the CSS code:

div.breadcrumbs {
padding: 1em 0;
text-align: left;
font-size: 90%;
margin: 0 1em;
border-bottom: 1px solid #660000;
}

Here is the template code:

<div class="breadcrumbs">
{breadcrumbs starttext='You are here' root='Home' delimiter='»'}
<span style="text-align: right; font-size: x-small;">Phone: (123) 123-4567</span></div>
<hr>

Any suggestions?

Thank you in advance for your time.
Dawn

Posted by Dawn Lawson on 12/15, 11:47 AM

Why not use » cause it seems simpler?

Posted by support on 12/28, 08:01 PM

I added the following JScript to clean up the trailing image on IE8 and Opera FWIW:

<script type="text/javascript">
$(document).ready(function() {
// Clean up the trailing arrow on the breadcrumbs
$('div#breadcrumbs a:last').css("background","none");
});
</script>

Posted by Bryan on 01/13, 08:26 AM

Really great!For the last 2 hours I was searching on the internet for a good code for breadcrumbs that is compatible with all browsers. This is a good one, I have used this code in my application and this is working fine in all browsers, dynamic drive provides this type of good java scripts. The problem is this is not working in beta version IE 8, but after a few changes in the css, it would working on IE 8 also , great script.

Posted by a href=undefinedhttp://www.babyoso.comundefinedEmb on 02/11, 03:16 AM

Comment Pages 3 of 4 pages < 1 2 3 4 >

Commenting is not available in this weblog entry.