Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

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

Simple and small. Might be a hastle to change the menu for each page, but I suppose it has potential.
Posted by Nathan on 05/29, 10:04 AM
wala lng
Posted by vien on 06/06, 02:27 AM
Nice section for developing CSS. I wish I'd seen it a while ago but I'll be back to learn more soon. Nicely done!
Posted by Stephen on 06/12, 01:39 PM
.breadcrumb a{
[strike]background
transparent url(media/breadcrumb.gifno-repeat center right;[/strike]
text
-decorationnone;
[strike]padding-right18px/*adjust bullet image padding*/[/strike]
color
navy;

.breadcrumb a:after
{
content
"  " ;

Or no?
Posted by Crises on 07/03, 06:42 PM
»? :))
Posted by cruocitae on 09/25, 09:34 AM
So you recommend using hiperlink elements instead of listing elements?, I have noticed also that a blank character is left intentionally between elements, could be used with out it?, nice page.
Posted by conny on 10/18, 05:16 PM
If combined with this tutorial:

http://www.webreference.com/js/scripts/breadcrumbs/

This technique could be part of your page template, and as long as you're using a fairly rational site organization (e.g. you keep images of spain in site.net/images/spain) it would be a nice feature with really very little work on the part of the developer.
Posted by illovich on 11/24, 08:51 PM
easy to use and I like the size. It looks nice on simple pages.
Posted by Richard S on 12/29, 07:21 PM
looks good, i think ill use this instead of the » html.
Posted by bad credit home loans on 01/03, 07:41 PM
Very easy to use (like most things on this site). Thanks guys.
Posted by Somesh Rao on 01/19, 04:16 PM

Comment Pages 1 of 4 pages  1 2 3 >  Last »


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