Breadcrumbs

Breadcrumbs

Process breadcrums are best used to show the preferable sequence of actions. When the whole process that a user has to go through is long, it’s better to split it into steps. Process breadcrums shouldn’t be confused with other kinds of tabs and breadcrumbs. They all serve different purposes and in fact they all can be used on the same page.

<ol class="process-breadcrumb">
 <li class="completed">
     <a href="#">One is done</a>
 </li>
 <li class="active">
     <a href="#">Two</a>
 </li>
 <li>
     <a href="#">Five</a>
 </li>
 <li>
     <a href="#">Three, sir.</a>
 </li>
 <li class="disabled">
     <a href="#">The last and unattainable step.</a>
 </li>
</ol>