CSS Breadcrumb Trail Navigation Menu

08 Nov 2011 by Shingo Tamura

This is a concise tutorial which will guide you through the creation of website page navigation hierarchies in HTML and CSS.

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. In addition 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;
}

Note that the order of the rules is by their depth in the DOM node tree. The benefit of having a rule like this for writing CSS helps you to 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 have the potential to be really creative with it, however, since this tutorial is not about creating pretty images, but rather to assist in simple development, following should guide you. 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;
}

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. However, 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 extra so that the image is not stuck to either the end of the a element nor the beginning of the next li element, so I'd recommend adding an 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.

I trust that this tutorial - CSS Breadcrumb Trail Navigation Menu - has assisted you in developing a straightforward navigation menu.

About the Author

Shingo Tamura photo

Shingo Tamura is a web developer based in New Zealand with 8+ years of experience in web development. Shingo is capable of dealing with a wide range of web or non-web technologies, and has a passion for HTML, CSS, JavaScript and Web Usability.

Follow him on Twitter at shingokko.

Rate This Posting

 
blog comments powered by Disqus

Related Blog Posts

  • Creating a purely CSS-driven hover menu using :hover.
  • Learn how to create a horizontal menu with an unordered list, float and clear.
  • This tutorial will guide you through the process of creating a drop-down menu using HTML and CSS.