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>
- Home
- Catalogue
- First Category
- Sub Category 1
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>
- Catalogue
- First Category
- Sub Category 1