Breadcrumb

The breadcrumb allows users easy to keep track of their locations within websites. The separators are automatically added using CSS.

Practical utilization of the breadcrumb you can find in the template Store

The correct structure of the breadcrumb:

<nav class="breadcrumb-nav">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Catalogue</a></li>
      <li><a href="/">First Category</a></li>
      <li><span>Sub Category 1</span></li>
   </ul>
</nav>

Add some icon to the breadcrumb

If you want to use some icon in the breadcrumb, add the class element into the … element:

<nav class="breadcrumb-nav">
   <ul>
      <li><a href="/"><i class="icon-sli-home"></i></a></li>
      <li><a href="/">Catalogue</a></li>
      <li><a href="/">First Category</a></li>
      <li><span>Sub Category 1</span></li>
   </ul>
</nav>