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.

<nav>
   <ol class="cd-breadcrumb">
      <li><a href="#0">Home</a></li>
      <li><a href="#0">Gallery</a></li>
      <li><a href="#0">Web</a></li>
      <li class="current"><em>Project</em></li>
   </ol>
</nav>

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:

.cd-breadcrumb li::after, .cd-multi-steps li::after {
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}

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.

<nav>
   <ol class="cd-breadcrumb custom-separator">
      <li><a href="#0">Home</a></li>
      <li><a href="#0">Gallery</a></li>
      <li><a href="#0">Web</a></li>
      <li class="current"><em>Project</em></li>
   </ol>
</nav>

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

.cd-breadcrumb.custom-separator li::after, 
.cd-multi-steps.custom-separator li::after {
  /* replace the default separator with a custom icon */
  content: '';
  height: 16px;
  width: 16px;
  background: url(../img/cd-custom-separator.svg) no-repeat center center;
  vertical-align: middle;
}

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:

.cd-breadcrumb.custom-icons li > *::before, 
.cd-multi-steps.custom-icons li > *::before {
  /* add a custom icon before each item */
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: .4em;
  margin-top: -2px;
  background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
  vertical-align: middle;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
  /* change custom icon using image sprites */
  background-position: -20px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
  background-position: -40px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
  background-position: -60px 0;
}
.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, 
.cd-multi-steps.custom-icons li.current:first-of-type > *::before {
  /* change custom icon for the current item */
  background-position: 0 -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
  background-position: -20px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
  background-position: -40px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
  background-position: -60px -20px;
}

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.

.cd-breadcrumb.triangle li::after, 
  .cd-breadcrumb.triangle li > *::after {
    /* 
      li > *::after is the colored triangle after each item
      li::after is the white separator between two items
    */
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    content: '';
    height: 0;
    width: 0;
    /* 48px is the height of the <a> element */
    border: 24px solid transparent;
    border-right-width: 0;
    border-left-width: 20px;
  }
  .cd-breadcrumb.triangle li::after {
    /* this is the white separator between two items */
    z-index: 1;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
    border-left-color: #ffffff;
    /* reset style */
    margin: 0;
  }
  .cd-breadcrumb.triangle li > *::after {
    /* this is the colored triangle after each element */
    z-index: 2;
    border-left-color: inherit;
  }
  .cd-breadcrumb.triangle li:last-of-type::after, 
  .cd-breadcrumb.triangle li:last-of-type > *::after {
    /* hide the triangle after the last step */
    display: none;
  }

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.

<nav>
   <ol class="cd-multi-steps text-bottom count">
      <li class="visited"><a href="#0">Cart</a></li>
      <li class="visited" ><a href="#0">Billing</a></li>
      <li class="current"><em>Delivery</em></li>
      <li><em>Review</em></li>
   </ol>
</nav>

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!