Breadcrumbs OC 3.x Guide

Code: Select all

  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  

Code: Select all

$_['text_home']             = '<i class="fa fa-home"></i>';

Code: Select all

		$data['breadcrumbs'] = array();

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('text_home'),
			'href' => $this->url->link('common/home')
		);

Code: Select all

	<div class="my-breadcrumbs">
        {% for breadcrumb in breadcrumbs %}
        //start of iteration, where breadcrumb is a value of breadcrumbs array key
        
           //custom first breadcrumb (index page link and/or shop name)
           {% if loop.first %}
                <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
                
	   //custom last breadcrumb (product name and link)
            {% if loop.last %}
            //you can remove html tag and get only product name/category name as result
                <span class="last">{{ breadcrumb.text }}</span>
                
            {% else %}
            // output for any breadcrumb that is not first and/or last
                <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
                
            {% endif %}
           //required END of {IF - ELSE} construction
            
        {% endfor %}
         //iteration end
         </div>

Code: Select all

	<div class="my-breadcrumbs">
                {% for breadcrumb in breadcrumbs %}        
                    {% if loop.last %}
                        <span class="last">{{ breadcrumb.text }}</span>
                    {% else %}
                        <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
                    {% endif %}
                {% endfor %}
         </div>

Code: Select all

.my-breadcrumbs {
/* defaults for wrapper*/
}
.my-breadcrumbs a,
my-breadcrumbs a:visited {
/* hyperlink styles*/
}
.my-breadcrumbs a:hover,
.my-breadcrumbs a:active,
.my-breadcrumbs a:focus {
/* css goes here */
}
.my-breadcrumbs .last { /* OR .my-breadcrumbs span {} */
/* css goes here */
}