How to add style to your breadcrumbs using CSS
Here is a simple way to create a scalable and stylish breadcrumb.
To start with, declare a simple unordered list as follows:
Here is the HTML code:
<ul id="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Portfolio</a></li>
<li>Current Page Title</li>
</ul>
All items have links, except the current page title.
Here is the CSS code
ul, li {
list-style-type:none;
padding:0;
margin:0;
}
The above code resets the list styling behavior and removes the bullet points for the breadcrumbs. The rest of the properties remove the default margin and padding value of the LI element.
Then create a container for breadcrumbs and specify the color, height and border properties for it.
#breadcrumbs {
height:2.5em;
border:1px solid #dedede;
}
All the breadcrumbs has to be displayed horizontally. To do this we need to give float:left to LI elements. Then specify the line-height value to place the text vertically centered. Set the padding value to leave space between each breadcrumb.
#breadcrumbs li {
float:left;
line-height:2.5em;
padding-left:1em;
color:#ffffff;
}
To add color to the breadcrumb text, specify the color property to the breadcrumb link item. And to make the entire breadcrumb clickable, change the inline “a” element to block element using display:block option.
#breadcrumbs li a {
color:#ffffff;
display:block;
text-decoration:none;
padding:0 15px 0 0;
background:url(../images/breadcrumbs.gif) no-repeat right center;
}
In the above code, the background property specified positions the background image to the right of the LI element and centers it vertically. So even when the text width is increased the image will always stay vertically center aligned and horizontally right to the LI element and thus providing scalability.
Inspiration from Veerle Pieters Tutorial
Update:
In response to overwhelming requests on the original image, we have posted the link to the image for download
