July 23, 2015 | 17 Feedbacks

Breadcrumbs & Multi-Step Indicator

A handy snippet to create responsive CSS breadcrumbs or multi-step indicators with ease.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

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.

Creating the structure

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

Adding style & Guidelines

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.



Jul 23, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Mirko

    These are real time savers!! Simple, yet elegant, just like it is supposed to be.

    • http://codyhouse.co/ Sebastiano Guerriero

      thanks Mirko ;)

  • Attilio Genovese


  • http://hakanarslan.net/ bosshakan

    Really nice, thanks.

  • Shubham Dogra

    Cool ! :) Keep going

  • reza haidari

    Really Really Beautiful, thanks dear Sebastiano

  • Natalie

    Nice! Very clean.

  • http://www.ztudio.es/ ztudio

    Easy! Thank you.

  • Ryan Harmon

    <3, Sebastiano, have you thought of building an HTML/CSS theme with all your gems included and selling it? I would buy it straight away.

    • http://www.theefunklord.com/ Thee

      Was going to say similar. This site has proven to be a solid forward-thinking resource and starting point for a few projects and ideas.

      Design is clean and simple, logic and explanations are easy to follow. Responses are helpful too.

  • Dominik Freitag

    Works perfect on my mac and even on Internet Explorer. Strange this is, that the triangle-breadcrumbs are broken on the current firefox version – but only on windows. No problem on my mac. Take a look at the attached pic

    • http://codyhouse.co Claudia Romano

      Hi Dominic, I just tested it on Firefox (39) on Windows and it’s working fine. Are you experiencing the same issue with our demo too? Thanks

      • Dominik Freitag

        Hi Claudia, I’ve testet it on another Machine today and it works perfect. Your demo was broken on the other machine too. Either it was a graphiccard bug (but everything on that page was fine) or it was what I call “digital voodoo” :) Thanks for checking and sorry for bothering you

  • http://imakshay.com/ Akshay Bhimani

    HI.. Sebastiano Guerriero your design and idea extremely Awesome. design is very clean & neat. just same like this design check this this is not bad : http://bit.ly/1BNOOYf :) i am not comparing your design to other design , i am not Marketing other design here. i am good leaner and analytics. Thanks :)

  • Tonkec Palonkec

    Hi Sebastiano. Is it possible to become contributor to Codyhouse project? :)

  • http://netduinoblog.wordpress.com/ Tobias Vandenbempt

    Hi Sebastiano !
    Nice work on this, Proved very useful.
    I was wondering if it is easy to hide the dot of a specific li (in Dot indicators example)?
    So that you have something like LocationA(Dot ) –line– TransportMethod (noDot ) –line– LocationB(Dot) ?

    Thanks in advance

  • Willy Le Roy

    Really nice !!! Thank you for this
    I’m trying to make the indicator as wide as the container (100% width), using display: table for ul tag and display: table-cell for li tag, which works fine on simple lists, but using your code I can’t seem to get it right – Any suggestions on how about doing this ?

    Thanks again :)