การปรับ Breadcumb ให้อยู่ในรูปแบบของ Tag ul และ li

    โดยส่วนใหญ่แล้ว Theme ที่มีการพัฒนาขึ้นมานั้นในส่วนของ Breadcumb นั้นจะมีการแสดงผลในแบบ Tag ul และ li โดยปกติแล้วถ้าไม่มีการกำหนดจะแสดงเป็น Tag div ซึ่งจะไม่สามารถใช้กับ Theme ได้ดังนั้นเราสามารถเปลี่ยนมาใช้ Tag ul และ li ได้ดังนี้

<?php if(isset($this->breadcrumbs)):
$this->widget('zii.widgets.CBreadcrumbs', array(
'links'=>$this->breadcrumbs,
'homeLink'=>false,
'homeLink'=>'<li><i class="icon-home home-icon"></i><a href="'.Yii::app()->homeUrl.'">Home</a><i class="icon-angle-right arrow-icon"></i></li>',
'tagName'=>'ul',
'separator'=>'',
'activeLinkTemplate'=>'<li><a href="{url}">{label}</a><span class="divider"><i class="icon-angle-right arrow-icon"></i></span></li>',
'inactiveLinkTemplate'=>'<li><span>{label}</span></li>',
'htmlOptions'=>array ('class'=>'breadcrumb')
)); ?><!-- breadcrumbs -->
<?php endif; ?>

เมื่อแสดงผลลัพท์จะได้ดังนี้

เมื่อดู Code จะเห็นดังนี้

<ul class="breadcrumb">
<li><i class="icon-home home-icon"></i><a href="/hanuman-template/index.php">Home</a><i class="icon-angle-right arrow-icon"></i></li>
<li><span>Buttons</span></li>
</ul><!-- breadcrumbs -->