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.

20 thoughts on “How to Create Nice Scalable CSS Based Breadcrumbs

  1. 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 🙂

  2. Pingback: 50+ Fresh CSS Techniques, Tutorials and Resources | Theme Center

  3. 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.

  4. Pingback: 50 FRESH CSS Techniques and Tutorials from Noupe - Internal Support

  5. Pingback: 25 CSS3 Navigation and Menu Tutorials | 1step web design: Best for developer and designer

  6. Pingback: Twenty Advanced CSS Tutorials - SitePoint

  7. Pingback: CSS3制作Breadcrumbs » 站群之家

  8. Hi Chris,I’ve been a member of Clixsense for many years. When I first joined, I didn’t really think it was worth it but then i started understanding how you can earn with this platform and I’ve stuck with it (even if it’s just completing a survey a day). It’s one of those earning platforms that’s been consistent, never fails to pay on time and I like using it’s advertising platform. I am focusing more on creating websites now a days but I think that Clixsense is a great site to start with when you first start looking at earning money online. Thanks for sharing!

Leave a Reply

Your email address will not be published.