• Article Written 
  • on 26.09.2009
  •  at 07:03 AM
  •  by admin

How to Create Nice Scalable CSS Based Breadcrumbs

A few days ago I was implementing breadcrumbs in a website I’m working on. breadcrumbs are not using often but most of the corporate websites are using breadcrumbs. In this tutorial i will learn you how to create nice scalable CSS Based Breadcrumbs. I am using only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code.

Final Preview

This is what we gone do today. Download file (12.1 kb)

breadcrums-final

HTML Structure

Here is our HTML code. It’s a simple unordered list:

[code lang="htmlstrict"]

[/code]

CSS Styling

Here is simple css styling

[code lang="css"]
body {
font:0.69em/1.13em "verdana", arial, tahoma, sans-serif; 
background:#fff;
}
[/code]
[code lang="css"]
ul, li {
	list-style-type:none;
	padding:0;
	margin:0;
}
[/code]
[code lang="css"]
#breadcrumbs {
	height:2.7em;
	border:1px solid #c9c9c9;
	}
[/code]
[code lang="css"]
#breadcrumbs li {
	float:left;
	line-height:2.7em;
	color:#777;
	padding-left:.85em;
	}		
[/code]
[code lang="css"]
#breadcrumbs li a {
	background: url(breadcrums.jpg) no-repeat right center;
	display:block;
	padding:0 15px 0 0;
	}	
[/code]

This is the only simple right corner arrow image, which is i am using in this tutorial.

breadcrums

[code lang="css"]
#breadcrumbs li a:link,
#breadcrumbs li a:visited {
	color:#777;
	text-decoration:none;
	}	
[/code]
[code lang="css"]
a:link, a:visited,	
#breadcrumbs li a:hover,
#breadcrumbs li a:focus {
	color:#222
	}	
[/code]

Final Result

Here is the final Result

breadcrums-final

Conclusion

Apply these Tips to your current and next projects, and you will surely appreciate the efforts.

Download the source file

If you’d like to check your work, you may download the rar file for this tutorial.

cssbreadcrumbs.rar (12.1 kb)

If you think that tutorial can be more better, Please share with us. Comment us

if you would like to receive more inspiration from us, please consider subscribing to our feed by RSS or by email.

Be Sociable, Share!
If you enjoyed this post, make sure you subscribe to my RSS feed!

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,

Untitled Document

18 Comments

  1. Pretty basic, but I guess someone could use it. Thanks.

  2. It’s cool. Thanks

  3. This is so simple and nice, hehe. Thanks for the lovely tutorial.

  4. Very nice, thanks for the share.

  5. Nice share post … thank’s.-= FoO Iskandar´s last blog ..News: Want To Impress Your Friends? Run Chrome OS 0.4.206 =-.

  6. very nice… thank you for this cool tutorial
    .-= vikas ghodke´s last blog ..50 Wonderful Poster and Advertisment Photoshop Tutorials =-.

  7. Very nice, thanks :-)

  8. Being really picky, I think it would be semantically better to use an ordered list, since breadcrumbs show the order of pages in a site. The css would be pretty much exactly the same :)

  9. [...] Create Nice Scalable CSS Based Breadcrumbs This tutorial shows you how to create a scalable CSS-based breadcrumb navigation using a single graphic, some basic CSS, and an unordered list. [...]

  10. Very nice

  11. Loved the post.
    I am taking the liberty of adding a reference to your article on my CSS aggregator site. Do let me know if you are ok with this.

  12. Very nice post. But how can we implement this for dynamic pages.

  13. Very nice post. But how can we implement this for dynamic pages using master pages as well.

  14. it is a very good bread crumb. Thanks a lot.

  15. [...] Create Nice Scalable CSS Based Breadcrumbs This tutorial shows you how to create a scalable CSS-based breadcrumb navigation using a single graphic, some basic CSS, and an unordered list. [...]

  16. [...] How to Create Nice Scalable CSS Based Breadcrumbs [...]

  17. [...] Source [...]

  18. [...] How to Create Nice Scalable CSS Based Breadcrumbs [...]

Submit a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge