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 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.
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.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.