Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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:

The HTML:

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

Simple and useful. I think all websites need breadcrumbs or a similar navigation method for user friendliness.
Posted by Özel Ders Kurs on 04/17, 02:50 PM
Do we need to manually edit each page for breadcrumb? Doesn't it automatically picks up file name from sub folder to automate its creation?
Posted by Mandar on 05/03, 06:42 AM
I really like breadcrumbs as an idea, and the way this code displays them is organized & neat, but I don't like the idea of having to post each link on every page I want this to show up on. It's a bit of a hassle; reminds me of the old days before stylesheets, when I was ignorant to them and posted my CSS on each individual page of my site. =o) Anyways, if you could create breadcrumbs without the hassle, I would DEFINITELY use them!
Posted by McKenna on 06/04, 04:02 PM
Thank you very much.
excellent work, i wil use it for my webpage.
Posted by Sahibinden on 06/19, 07:16 AM
very nice example.
thanx a lot
Posted by orgu on 07/01, 09:53 AM
There is also HTML that can be used instead of the image!
Posted by Sinterklaas on 07/25, 03:11 PM
I'll try it..looks good
Posted by livejasmin on 09/13, 12:34 PM
Gr8 solution... but what happens when someone views with images turned off?
Any alternatives to the >> image????
Posted by Jenny on 10/09, 12:53 AM
@Jenny--
» is the code thing for the >> image.
Posted by Psycho37 on 02/09, 04:19 PM
&#187; 

Sorry, I have to put it in code tags.
Posted by Psycho37 on 02/09, 04:20 PM

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


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.