Dynamic Drive CSS Library- CSS Breadcrumbs

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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 (26)

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

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

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