Lee Jordan Web developer


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 avoid using images? There are a few articles around the web on how to create these breadcrumb arrows with :before and :after pseudo elements but this does not work in older versions of Internet Explorer. My solution uses spans and 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:

With jquery enhancement:

Full guardian style design:


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.

<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>


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.

#breadcrumbs {
    padding: 0;
    margin: 0;
    height: 30px;
    line-height:30px /* line-height MUST be the same as height */
    background: #CCCCCC;

#breadcrumbs li {
    float: left; /*ie6/7 needs this */

#breadcrumbs a {
    float: left;
    padding: 0 20px 0 10px;
    color: #000000;
    text-decoration: none;
    outline: none;

#breadcrumbs a:hover {
    text-decoration: underline;
#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;

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

/* 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;

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.

$("#breadcrumbs a").hover(
    function () {
    function () {

Further discussion and reading

Here is a similiar approach using the :after pseudo element and here’s a solution that uses images

Posted on: December 23, 2010
Tagged: , , , ,