Hey guys! We are here again with a new tutorial on CSS Breadcrumb Trail Design. As breadcrumbs are the important part of the web applications to indicate the current part of web app on which user is acting upon.So lets see how to design the Breadcrumbs with simple HTML and CSS. Here we are going to create the arrows with CSS; which we had covered in our earlier tutorial.
So now we will see how to nest the elements so that we can create the desired breadcrumb trail.
There can be two approaches to do this; though both of them are most likely same.
With Pseudo Elements:
Here will will leverage the pseudo elements to draw our breadcrumb trail.
Without Pseudo Elements:
Here we will use only divs to create our breadcrumb trail design.
Now coming to the breadcrumb design. The essential part is the design of a single slice or step of the breadcrumb design. To design a slice; we need three parts
- Slice Body
- Slice Head
- Slice Tail
The slice body will be a simple inline-block div of fixed height. Suppose the breadcrumb will be having background of #999 i.e. Grey.
The Slice head will be created by the help of div; and it will be a triangle of grey color (#999) created by CSS; it will be inline-block and placed after the Slice Body. The full guide to create the CSS Triangles is available here.
The Slice tail will also be a triangle but wil a different kind of design; for head, we created a grey arrow with a transparent/white background. Here it will be a triangle of transparent/white color and the background is of Grey color (#999).
Following is the HTML and CSS for the above Slice:Now the trail of these will form a Breadcrumb Trail; but there is another problem with this. The arrow head and trails are not spaced properly.
So we need to fix the Margins and Z-indexes of Slice and Slice-Head respectively. Following is the updated code for the breadcrumb trail:
And it looks like this:
Now; with the above design, the HTML is a bit complicated and the CSS is confusing.So we can impose a HTML structure with either divs or ul-li. One more thing is that we can take the benefit of pseudo elements to create Head and Tail of a slice. For that
:after pseudo elements will be used and they will be positioned absolutely to make an exact look that we achieved in previous slice design. Following code will let you design your breadcrumb with both divs or ul-li: