CSS3 breadcrumbs

by - 62 comments

A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. Also, the breadcrumbs can reduce the number of actions a user need to perform in order to navigate back.

So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs.

View demo

The HTML

Tha markup is simple and minimal, based on an unordered list.

<ul id="breadcrumbs-one">
    <li><a href="">Lorem ipsum</a></li>
    <li><a href="">Vivamus nisi eros</a></li>
    <li><a href="">Nulla sed lorem risus</a></li>
    <li><a href="">Nam iaculis commodo</a></li>
    <li><a href="" class="current">Current crumb</a></li>
</ul>

The CSS

First, let’s add a mini CSS reset for our unordered lists:

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

Secondly, I’d like to add that all the breadcrumbs I made for this tutorial are using CSS pseudo-elements. I bet there’s no need to specify what pseudo-elements are and how cool they are.

First example

Here I used a similar technique to the one I used for creating these CSS3 tooltips. Basically, to create a right-bordered triangle effect, the triangles created with pseudo-elements are placed one above another. The darker triangle will be shifted a bit in order to achieve the border.

#breadcrumbs-one{
  background: #eee;
  border-width: 1px;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-one li{
  float: left;
}

#breadcrumbs-one a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);  
}

#breadcrumbs-one li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-one a:hover{
  background: #fff;
}

#breadcrumbs-one a::after,
#breadcrumbs-one a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

#breadcrumbs-one a::after{ 
  z-index: 2;
  border-left-color: #ddd;  
}

#breadcrumbs-one a::before{
  border-left-color: #ccc;  
  right: -1.1em;
  z-index: 1; 
}

#breadcrumbs-one a:hover::after{
  border-left-color: #fff;
}

#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-one .current::after,
#breadcrumbs-one .current::before{
  content: normal;  
}

Second example

The CSS shapes built with the pseudo-elements are placed before, respectively after.

#breadcrumbs-two{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-two li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-two a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
  position: relative;
}

#breadcrumbs-two a:hover{
  background: #99db76;
}

#breadcrumbs-two a::before{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
}

#breadcrumbs-two a:hover::before{
  border-color: #99db76 #99db76 #99db76 transparent;
}

#breadcrumbs-two a::after{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #ddd;
  right: -1em;
}

#breadcrumbs-two a:hover::after{
  border-left-color: #99db76;
}

#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
  content: normal;
}

Third example

Using border-radius we will round the corners for our rectangle and square shapes. The square will be rotated, in order to achieve a rounded diamond.

#breadcrumbs-three{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-three li{
  float: left;
  margin: 0 2em 0 0;
}

#breadcrumbs-three a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  background: #ddd;  
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  border-radius: .4em 0 0 .4em;  
}

#breadcrumbs-three a:hover{
  background: #abe0ef;
}

#breadcrumbs-three a::after{
  background: #ddd;
  content: "";
  height: 2.5em;
  margin-top: -1.25em;
  position: absolute;
  right: -1em;
  top: 50%;
  width: 2.5em;
  z-index: -1; 
  transform: rotate(45deg);
  border-radius: .4em;
}

#breadcrumbs-three a:hover::after{
  background: #abe0ef;
}

#breadcrumbs-three .current,
#breadcrumbs-three .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-three .current::after{
  content: normal;
}

Fourth example

Again, with the pseudo-elements you’ll add two rectangles before and after the element. Then you’ll round the outer sides for each one. The rest is nothing but poetry. :)

#breadcrumbs-four{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-four li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-four a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
  position: relative;
}

#breadcrumbs-four a:hover{
  background: #efc9ab;
}

#breadcrumbs-four a::before,
#breadcrumbs-four a::after{
  content:'';
  position:absolute;
  top: 0;
  bottom: 0;
  width: 1em;
  background: #ddd;
  transform: skew(-10deg);  
}

#breadcrumbs-four a::before{

  left: -.5em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-four a:hover::before{
  background: #efc9ab;
}

#breadcrumbs-four a::after{
  right: -.5em;   
  border-radius: 0 5px 5px 0;
}

#breadcrumbs-four a:hover::after{
  background: #efc9ab;
}

#breadcrumbs-four .current,
#breadcrumbs-four .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-four .current::after,
#breadcrumbs-four .current::before{
  content: normal;
}

View demo

CSS3 breadcrumbs advantages

  • No images, so it’s easy to update and maintain.
  • Everything is scalable, em based.
  • Contains fallbacks for older browsers.

Final words

I didn’t merged the common styles for the above breadcrumbs with a purpose. I thought that if you need a certain breadcrumbs style, just copy&paste that, without other CSS inheritances issues.

Thank you for reading and I hope you liked this tutorial. Have any questions or just want to share your thoughts? Feel free to leave a comment!

You might also like:

62 thoughts on “CSS3 breadcrumbs”

  10. Really nice, but FF 10.0 on OSX the third example is a bit messed up. The arrow pointing to the right is not lined up well. I’ll get a screenie if you like. Message me on twitter @stoocollins :)

    Reply ↓

    • Ah, actually it’s based on if you make the viewport smaller and the breadcrumb has to wrap to the next line, this causes it to break :)

      Reply ↓

  11. Just a reflexion about the mark-up: why an unordered list?

    To me it makes more sense an ordered list since the nature of a breadcrumb is to show a path the a user has followed, or a path of sub-categories in which a concept has been pre-categorized.

    Therefore an ordered list would be more appropriate and meaningful instead.

    Reply ↓

    • Oriol, that’s a good point you share here. I must admit there has been some discussion in the past regarding the best markup for creating breadcrumbs.

      Though, IMHO, I think an ordered list isn’t super mega cool comparing to an unordered list.

      Reply ↓

  16. Must put class at the place you think to use more that once on the same parent level.

    So instead of the id for the I rather put a class identifier and after inside you can use class or id. Depends if you put more than one current breadcrumb

    Reply ↓

      • Thanks a lot!

        This is manly late night fun for me, and not created for production as is.. I also kind had the idea that it would be easier to get an overview if i only focused on the key CSS3 elements so the demo contains as little code as possible. But that of course makes it less useful “out of the box”, if you just want to copy and use it!? :)

        Reply ↓

  21. Hi Red
    Thank you for your breadcrumbs site.
    I enjoy your site very much.
    By the way what is this source-code license?

    With kind regards
    Masatao Watanabe

    Reply ↓

    • Nice to hear you enjoy the tuts you found here. The code is not licensed, just use it as you like. A link back will always be appreciated ;)

      Reply ↓

  27. What function do I change the direction of the arrow from right to left, it is important to me.
    Thanks in advance

    Reply ↓

  28. Genius. I was acutally about to cut images for my breadcrumb, was just browsing for another issue i had. Gone use example 1 you had on the site.

    Reply ↓

  29. Excelente!!

    He aprendido a dar mis primeros pasos en estilo CSS y breadcrumbs gracias a red-team-design.
    Muchas Gracias
    muy simple explicado, facil de entender para alquien que tiene poca idea de diseño de estilos web.
    tambien me sirvio la explicacion de los menu para barra de navegacion con estilos CSS
    luego de perder mucho tiempo buscando por la web lo encontre y enseñado como un maestro lo hace

    Reply ↓

  36. I love this, and have implemented it in my latest project. Now I am a relative newcomer to web design, so please forgive my naiveté here. I am using ul elements elsewhere in my web site, and have found that modifying the global ul properties sometimes really messes up the breadcrumb ul as well. Is there any EASY way of keeping the global ul properties from being applied to the ul within the breadcrumb? I have a couple of ideas on how to solve this, but am curious to see how more experienced designers handle this.

    Reply ↓

    • Michael, that’s why, usually the global styles for lists shouldn’t consist of many properties other than margin, padding or for example list-style.

      The thing is that the more you add, the more you’ll need to reset later and that’s not recommended.

      Reply ↓

  37. Catalin, this is very cool! Found your post looking for some CSS breadcrumb examples and this is the best I’ve found so far!

    I have a question… if you have a long breadcrumb menu which ends up spanning longer than the page, breadcrumbs end up wrapping onto the following line and the arrows end up getting mangled/misaligned. Is there any way around this?

    Reply ↓

    • Rich, I’m afraid these types of breadcrumbs you read about in this article are best viewed in one line.

      In your case, I wouldn’t allow a breadcrumb to take so much space. You should programmatically restrict it to a fixed number of chars and append “…” at the end of it if exceeds that limit.

      Good luck!

      Reply ↓

  38. Gotchya! Alright, I’ll remove some of the padding on the sides of the links and truncate longer link contents to prevent them from wrapping. Thanks again! :)

    Reply ↓

  39. Hi Catalin,

    I’m not sure if you’re aware, but the arrows break (no longer vertically centred) if you zoom in / out in Chrome. They work fine if the measurements are changed to pixels.

    John

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>