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>
Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase

lorem ipsum generator