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.
Tha markup is simple and minimal, based on an unordered list.
First, let’s add a mini CSS reset for our unordered lists:
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 howcooltheyare.
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.
The CSS shapes built with the pseudo-elements are placed before, respectively after.
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.
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. :)
CSS3 breadcrumbs pros
No images, so it’s easy to update and maintain.
Everything is scalable, em based.
There are fallbacks for older browsers.
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!