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 4 of 4 pages « First < 2 3 4

Thanks for sharing about Breadcrumbs.Breadcrumbs are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents.The term is taken from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.It typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one.

Posted by a href=undefinedhttp://www.babyoso.comundefinedemb on 02/11, 11:19 PM

Wow really very nice and fantastic information you share here. I read your entire article and nice and fantastic info on rent a car india. Really very nice and valuable information.

Posted by online shopping on 03/11, 11:19 PM

I’ll definitely miss this blog, and all the inside jokes connected to it. I’m sure that one of your many online friends will be happy to post your thoughts whenever you get the urge to write them, though, so I look forward to your guest appearances.
Disk encryption software - Powerful encryption software with pre-boot authentication secures 100% of your hard disk drive, including the OS.

Posted by Disk encryption software on 03/25, 05:13 AM

I wish I'd seen it a while ago. Works fine on IE 8, FF, Opera, Chrome ... I'm planning to replace my 2 years old version (table based) on my XTechnik site. Thanks.

Posted by XTechnik on 05/11, 04:50 PM

Such interesting read and information, thanks for sharing this post, I’ve already bookmarked your blog. 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! south bay

Posted by South Bay Taxi on 05/21, 03:54 AM

Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!! Thumbs up Genetic diseases

Posted by Genetic diseases on 05/23, 04:24 AM

Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful
Display Stands

Posted by Display Stands on 05/30, 08:12 AM

I am very much impressed with this website.

thanks

Posted by Kumar on 06/01, 10:06 AM

Resources like the one you mentioned here will be very useful to me. I will post a link to this page on my blog. I am sure my visiors will find that very useful Portable Counters

Posted by Portable Counters on 06/04, 01:59 AM

This is such a great resource that you are providing and you give it away for free. I love seeing websites that understand the value of providing a quality resource for free. It’s the old what goes around comes around routine. Did you acquired lots of links and I see lots of trackbacks? Portable Displays

Posted by Portable Displays on 06/04, 03:02 AM

Comment Pages 4 of 4 pages « First < 2 3 4

Commenting is not available in this weblog entry.