CSS breadcrumbs: some shapes may be useful for you

Tram Ho

A breadcrumb bar (do not know what to call in Vietnamese) will contain hierarchical links that allow users to easily locate the current location or quickly redirect to the higher-level page. In addition, breadcrumb also helps users to less effort when having to press back many times.

In the simplest sense, if your website has many pages with many sub-levels then to increase usability you will need to use breadcrumbs.

As mentioned, in this post we will show some CSS breadcrumb navigation using CSS pseudo.

The HTML

Markup is as simple as this, using an unordered list

The CSS

First of all, reset the style of the ul tag first.

Then we’ll create breadcrumbs using CSS pseudo-elements.

First example

For this first example, the technique is the same as making 1 CSS3 tooltips. Basically, create a triangle with border in the right corner by creating two triangles, the darker one will need a little bigger and shift to the left a little to create the border.

Second example

This example is also easy to understand right, also put the 3 pictures together, CSS as follows

Third example

In this example, just using a little border-radius we will create a rounded rectangle and a rounded square that has been rotated 45 degrees to make it look like … “pencil” .

Fourth example

This time join the three rectangles together, incorporate some slight border-radius on the corners of the pseudo-elements, then use the transform skew to get the desired shape. Simple, but it looks pretty cool.

The advantage of breadcrumbs is with CSS

  • Without images, it’s easy to fix and maintain.
  • Everything is scalable, size is em .
  • Good support on old browsers too.

Epilogue

The style above repeated the code quite a lot, but I did not merge it together. You may need a specific design in it, so just copy the CSS and everything will work (don’t forget to fix the id in HTML).

An extra bonus for this design result, in fact it is of form steps, not breadcrumbs, but the shape is similar, including a large zoom image for you to try CSS (remember not to ignore border and border-radius)

Comment your results in the comments below.

Thank you for reading and I hope you liked this tutorial!

Share the news now

Source : Viblo