A breadcrumb navigation or breadcrumbs allows users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. Also, the breadcrumb navigation can reduce the number of actions a user needs to perform in order to navigate back.
To keep it simple, if you have a website with a lot of pages and sub-levels, in order to increase the usability for your content, you need to use breadcrumbs.
Having said that, in this article, you will learn how to create a CSS breadcrumb navigation with CSS pseudo-elements.
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 CSS 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. :)
CSS breadcrumbs advantages
No images, so it’s easy to update and maintain.
Everything is scalable, em font sizing based.
Has 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 and 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 get in touch!