Lee Jordan Web developer

guardian_arrows

Breadcrumb navigation with css arrows

A quick demo of a scalable, cross browser compatible breabcrumb navigation using css, some jquery and no images.

I’ve long been a fan of breadcrumb navigation using chunky arrows such as that used on the guardian website and there are several possible ways to approach this. The guardian’s website uses images to achieve the desired result but what if we want to have no images and use only css? There are a few articles around the web on how to create these breadcrumb arrows but none of them seem to work for Internet Explorer so here’s my take on breadcrumb arrows which has been tested as working in IE6/7/8 as well as opera, safari, chrome and firefox. If you find any issues, let me know as I am keen to see if this will work across all browsers fully.

The Demo

Css only:

See this demo in a new browser window

With jquery enhancement:

See this demo in a new browser window

Full guardian style design:

See this demo in a new browser window

The HTML

A simple ordered list, a link inside each list item, with a span for the arrows. Every second list item has the class “odd” which alternates css styles for each breadcrumb. The final list item is our currently selected page and therefore I have not made this a link nor included a span for the arrow.

<code><ol id="breadcrumbs">
    <li><a href="#">Home<span class="arrow"></span></a></li>
    <li><a href="#" class="odd">World news<span class="arrow"></span></a></li>
    <li><a href="#">America<span class="arrow"></span></a></li>
    <li><a href="#" class="odd">Economics<span class="arrow last"></span></a></li>
    <li>  The currently selected page</li>
</ol>
</code>

The CSS

First off, we have the css for the list, the list items, the links and the spans. The spans are basically a zero width and height element with thick borders to simulate the arrowhead. Here is what it would look like in isolation:

However, in the context of the rest of the breadcrumbs it becomes an arrowhead. The colours can be tweaked obviously, this is just a boring grey colour scheme for demo purposes.

<code>#breadcrumbs {
    padding: 0;
    margin: 0;
    height: 30px;
    font: bold 14px/30px arial; /* line-height MUST be the same as height */
    list-style-type:none;
    background: #CCCCCC;
}
#breadcrumbs li {
    float: left; /*ie6/7 needs this */
}
#breadcrumbs a {
    float: left;
    position:relative;
    padding: 0 20px 0 10px;
    color: #000000;
    text-decoration: none;
    outline: none;
}
#breadcrumbs a.odd {
    background: #e9e9e9;
}
#breadcrumbs span {
    position: absolute;
    display: block;
    line-height: 0px;
    height: 0px;
    width: 0px;
    right: 0px;
    top: 0px;
    border-left: 10px solid #CCCCCC;
    border-right: none;
    border-top: 15px solid #e9e9e9;
    border-bottom: 15px solid #e9e9e9;
}
#breadcrumbs a.odd span {
    border-left: 10px solid #e9e9e9;
    border-top: 15px solid #CCCCCC;
    border-bottom: 15px solid #CCCCCC;
}
</code>

Then we have the classes for the jquery hover states which change the colours of the span arrows and the links themselves.

<code>/* classes for jquery hover */
#breadcrumbs a.hover {
    text-decoration: none;
    background: #999999;
}
#breadcrumbs a span.hover {
    border-left: 10px solid #999999;
}
#breadcrumbs a span.pre_hover {
    border-top: 15px solid #999999;
    border-bottom: 15px solid #999999;
}
</code>

The jquery

This is optional but gives the illusion that the arrow is one distinct clickable link. After including the jquery library in my page, I then apply the hover functions to the links. This jquery changes the class of the link that is being hovered, it’s child span, and the span in the previous link too.

<code>$("#breadcrumbs a").hover(
    function () {
        $(this).addClass("hover").children().addClass("hover");
        $(this).parent().prev().find("span.arrow:first").addClass("pre_hover");
    },
    function () {
        $(this).removeClass("hover").children().removeClass("hover");
        $(this).parent().prev().find("span.arrow:first").removeClass("pre_hover");
    }
);
</code>

Further discussion and reading

You may find some of these to be interesting reading as alternatives to creating breadcrumb arrows:

A similiar approach using the :after pseudo element

Breadcrumb arrows using images