Users obviously don’t like to feel lost while they navigate the content of our website. This is why we introduced UX patterns to show them how they got to a specific page (breadcrumbs) and what comes next (multi-steps indicators).

Since both breadcrumbs and multi-step indicators share a similar structure (a simple list of items), we created a handy snippet to create and customize them with a preset of time-saving classes.

Icons from our Nucleo library.

The HTML structure is very basic: an ordered list of items, wrapped into a <nav>element.

We created 2 main classes for the <ol> element: .cd-breadcrumb and .cd-multi-steps. Although they share a similar style, we wanted to differentiate the two web components since they serve a different purpose.

For the basic version, we used the ::after pseudo-element of the list items to create the separator element:

We created a preset of CSS classes – to be added to the <ol> element, that modify the style of the web component.

For example: if you want to use a custom icon as a separator between items (example number 2), just use the .custom-separator class.

Then remember to update the background image of ::after pseudo-element of the list item:

The .custom-icons class is for adding custom icons before each list item. Once again you need to update the CSS according to the images you want to use. In our demo we used a .svg file as image sprites:

The .triangle class generates CSS triangles after each list item. To create the separation between items we used a trick we found on CSS-Tricks.

Other classes to keep in mind are: .text-center, .text-top and .text-bottom to be used with the .cd-multi-steps class to set the position of the labels, and .count if you want to add a counter to the multi-steps indicator.

The easiest way to understand how this resource works is by checking the source files: most classes can be combined, and we covered all possible combinations in the 9 examples of the demo.

Enjoy!

https://codyhouse.co/gem/css-breadcrumbs-and-multi-step-indicator/