Shingo Tamura's Blog

Creating a breadcrumb trail using float and clear

This tutorial will show you how to create a breadcrumb trail with HTML and CSS using float and clear.

Markup

We will use an unordered list wrapped in a div element with a class named breadcrumb.

<div class="breadcrumb">
	<ul>
		<li class="first">
			<a href="/">Photography</a>
		</li>
		<li>
			<a href="/">Cameras &amp; Camcorders</a>
		</li>
		<li>
			<span>Digital SLRs</span>
		</li>
	</ul>
</div>

Note that the first li element has a class named first to indicate the first node of the breadcrumb trail. Also a span element is used instead of an a element under the last li element because it is supposed to show the page that the user is currently on and it should not be selectable.

We will use the technique from creating a horizontal menu using an unordered list and float. But don't forget to change div.menu to div.breadcrumb for your breadcrumb trail.

Initial CSS Rules

div.breadcrumb:after
{
	content: ".";
	visibility: hidden;
	display: block;
	clear: both;
	height: 0;
}
div.breadcrumb ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}
div.breadcrumb ul, div.breadcrumb li
{
	float: left;
}
div.breadcrumb li
{
	display: inline;
}
div.breadcrumb li a, div.breadcrumb li span
{
	display: block;
}

One thing to note here is that the order of the rules is by their depth in the DOM node tree. Having a rule like this for writing CSS may help you keep your styles easy to follow.

Also note that under the last rule, display:block is not only applied to the a elements but also the span elements. This ensures that the contents of each li element look consistent whether it is an a element or a span element.

Creating an image of an arrow

You can go really fancy with it, but since this tutorial is not about creating pretty images, something like the following should do it. The size of the image is 10 pixels by 10 pixels.

Centering the image vertically

If you want the image to align with the text, first set the height and line-height of the a and span elements. This vertically centers the text.

div.breadcrumb li a, div.breadcrumb li span
{
	display: block;
	height: 20px;
	line-height: 20px;
}

And then, use the background property to vertically center the image.

Using "background" to display the image

To display the image on the items in the breadcrumb, you could use the background property. If you just want to set the background image you can use background-image but quite often you also want to set other things such as the position of the image. background lets you set 4 properties in one line like this:

background: [background-color] [background-image] [background-repeat] [background-position];

So which elements to show the image in? We will use the li elements because we don't want the image to be part of the a elements and clickable.

Each item is represented as an a element wrapped in an li element. Here is a visual representation (padding around the a element is just to clearly show there are two elements here but it actually has no padding at this point):

To show the image in the li element, add a bit of padding between the left edges of the elements.

To achieve this, you need to apply padding-left to the li element. The width of the image is 10 pixels but it's a good idea to add a bit of extra so that the image is stuck to neither the end of the a element nor the beginning of the next li element, so let's add extra 8 pixels of padding-left.

div.breadcrumb li
{
	padding-left: 18px;
}

Now we will apply the background property on the li element to show and position the image.

div.breadcrumb li
{
	padding-left: 18px;
	background: transparent url('arrow.png') no-repeat 4px 5px;
}

You may notice here that background-position is set to 4px 5px at the end of the line. This moves the image to the right by 4 pixels and also down by 5 pixels essentially adding the specified amount of padding around the image.

Here's what you'll get by the rules we've covered so far:

Finally, hide the image of the first item in the breadcrumb:

div.breadcrumb li.first
{
	padding-left: 0;
	background-image: none;
}

And this is it. You've got a real clean breadcrumb trail that can easily be styled further.

Hope this helps someone.