How to Create Nice Scalable CSS Based Breadcrumbs |

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:

<ul id="breadcrumbs">

<li><a href="#">Home</a></li>

<li><a href="#">Main Lavel</a></li>

<li><a href="#">Sub Lavel</a></li>

<li><a href="#">Sub sub Lavel</a></li>

<li>Your Current page</li>

</ul>

CSS Styling

Here is simple css styling

body {

font:0.69em/1.13em "verdana", arial, tahoma, sans-serif; 

background:#fff;

}

ul, li {

        list-style-type:none;

        padding:0;

        margin:0;

}

#breadcrumbs {

        height:2.7em;

        border:1px solid #c9c9c9;

        }

#breadcrumbs li {

        float:left;

        line-height:2.7em;

        color:#777;

        padding-left:.85em;

        }

#breadcrumbs li a {

        background: url(breadcrums.jpg) no-repeat right center;

        display:block;

        padding:0 15px 0 0;

        }

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

breadcrums

#breadcrumbs li a:link,

#breadcrumbs li a:visited {

        color:#777;

        text-decoration:none;

        }

a:link, a:visited,      

#breadcrumbs li a:hover,

#breadcrumbs li a:focus {

        color:#222

        }

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.

Filed under: Css, Tutorials by admin

Promote Us

Tags: Css ,Tutorials

if you enjoyed reading this article, please check out other related articles below:

Untitled Document

16 Comments

Ulrik Hvidesays on : September 27th, 2009 at 3:44 pm Said:

Pretty basic, but I guess someone could use it. Thanks.
İbrahimsays on : September 27th, 2009 at 5:32 pm Said:

It’s cool. Thanks
Nokadotasays on : September 28th, 2009 at 1:27 am Said:

This is so simple and nice, hehe. Thanks for the lovely tutorial.
FAQPALsays on : September 28th, 2009 at 12:18 pm Said:

Very nice, thanks for the share.
FoO Iskandarsays on : September 29th, 2009 at 1:23 pm Said:

Nice share post … thank’s FoO Iskandar´s last blog ..News: Want To Impress Your Friends? Run Chrome OS 0.4.206
vikas ghodkesays on : October 12th, 2009 at 9:36 am Said:

very nice… thank you for this cool tutorial
vikas ghodke´s last blog ..50 Wonderful Poster and Advertisment Photoshop Tutorials
Lika Websays on : November 17th, 2009 at 4:59 am Said:

Very nice, thanks
Blatmannsays on : December 2nd, 2009 at 11:16 pm Said:

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
50+ Fresh CSS Techniques, Tutorials and Resources | Theme Centersays on : December 10th, 2009 at 5:16 pm Said:

[...] 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. [...]
Jaysays on : December 18th, 2009 at 7:49 am Said:

Very nice
sivaranjansays on : May 19th, 2010 at 6:45 pm Said:

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.
Veerasays on : October 28th, 2010 at 11:25 am Said:

Very nice post. But how can we implement this for dynamic pages.
Veerasays on : October 28th, 2010 at 11:25 am Said:

Very nice post. But how can we implement this for dynamic pages using master pages as well.
Henrsays on : February 7th, 2011 at 5:50 am Said:

it is a very good bread crumb. Thanks a lot.
50 FRESH CSS Techniques and Tutorials from Noupe - Internal Supportsays on : September 1st, 2011 at 11:28 pm Said:

[...] 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. [...]
25 CSS3 Navigation and Menu Tutorials | 1step web design: Best for developer and designersays on : January 2nd, 2012 at 12:44 am Said:

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