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


  1. peter

    very nice

  2. Chad

    That’s really a great use of borders to implement the arrow. I would have never thought of it… Thanks for sharing this!

  3. Brent

    Great article, thank you.
    One link gives a 404 though.

    Can you send me the real one?
    thank you !!

  4. Steve Hoare

    This is a nice solution, but making the breadcrumbs dynamic caused me a few headaches, so I decided since we are already using jQuery for some of it, lets use it to add the arrow and insert the last class.

    $("#breadcrumbs ul li a").append('');
    	$("#breadcrumbs ul li:odd a").addClass("odd");
    	$("#breadcrumbs ul li span").eq(-1).addClass("last");
    	$("#breadcrumbs a").hover(
        function () {
        function () {
    • Lee Jordan

      Nice work Steve. My example is purposely basic because I was just experimenting with the arrows themselves. I am glad you found some use for it. Would you mind sharing the site url when you are finished perhaps?

  5. Chinh Phan

    I run this page
    in IE 8 (IE tester) and there are no arrows any more :)

    • Lee Jordan

      Hi Chinh. I think that is because on the css-tricks example they are using :before and :after pseudo elements which have some limitations in IE8 and below. I suspect it won’t work because of the transparent border contained in :after

      That’s why my solution uses seperate spans, for better browser support. Use of :after is always desireable to me because it keeps things streamlined (less markup) but it’s not always feasible if you have to support older browsers.

      One day we will no longer have to worry about ie8!

Have your say

wrap any code samples in <pre class="prettyprint">...</pre>

  1. Incoming links (trackbacks)

Browse posts: