Note: As of Yii 1.1.11 CBreadcrumbs now has more options which allow you to create Bootstrap style breadcrumbs without the method below…
$this->widget('zii.widgets.CBreadcrumbs', array(
'links' => array(
'businesses' => array('business/index'),
'Ikea' => array('business/view', 'id' => '123'),
'Update',
),
'homeLink' => false,
'separator' => '',
'tagName' => 'ul',
'inactiveLinkTemplate' => '<li><span>{label}</span></li>',
'activeLinkTemplate' => '<li><a href="{url}">{label}</a> <span class="divider">/</span></li>',
'htmlOptions' => array('class' => 'breadcrumb'),
));
Original post:
The default breadcrumbs in yii (CBreadcrumbs) do a job. Not very well, but they do it.
Ideally breadcrumbs should be an unordered list containing anchor tags for maximum styling options. Yii uses a div with a list of anchor tags.
I used to put up with it, but as the infinitely useful Twitter Bootstrap uses an unordered list for their own breadcrumbs I decided enough was enough.
So here is how to create your own breadcrumbs that use an unordered list, list items and anchor tags…
The first thing we need is to create our own component which extends CWidget, as that’s how we’ll include our breadcrumb into a view.
Create a file called Breadcrumb.php into protected/components with the following contents:
<?php
class BreadCrumb
extends CWidget
{
public $crumbs = array();
public $divider = ' / ';
public $homeLink = array('Home' => false);
public $htmlOptions = array();
public function run
()
{
$this->render('breadcrumb');
}
}
?>
Next we need to create a view file for it. If you don’t already have one add a view folder to the protected/components folder and then create a new file in there called breadcrumb.php (so protected/components/views/breadcrumb.php) with the following contents:
<ul
<?php echo ($this->htmlOptions['class'] ?
' class="' . $this->htmlOptions['class'] . '"' : ''); ?>>
<?php
foreach($this->crumbs as $k => $crumb)
{
echo '<li' . ($crumb[2] ?
' class="active"' : '') . '>';
if(isset($crumb[1
])) {
echo CHtml
::link($crumb[0
], $crumb[1
]);
}
else
{
echo $crumb[0
];
}
if(sizeof($this->crumbs) > ($k+1
))
{
echo '<span class="divider">' . $this->divider . '</span>';
}
echo '</li>';
}
?>
</ul>
And finally how to use it. Well select your view and inject the following code:
$this->widget('application.components.BreadCrumb', array(
'divider' => '/',
'htmlOptions' => array(
'class' => 'breadcrumb',
),
'crumbs'=>array
(
array('Home', array('site/index')),
array('Organisations', array('organisation/index')),
array('Acme Inc.', array('organisation/view', 'id' => 3
)),
array('Update Business', null),
),
));
Which should then give you something like the following html (which twitter bootstrap will love because we’ve used the correct html and included the breadcrumb class on the ul and divider class on the divider)…
<ul class="breadcrumb>
<li><a href="/">Home
</a><span class="divider">/
</span></li>
<li><a href="/organisation">Organisations
</a><span class="divider">/
</span></li>
<li><a href="/organisation/2">Acme Inc.
</a><span class="divider">/
</span></li>
<li>Update Business
</li>
</ul>
Hopefully that’s of some use to you. You could easily extend it to allow a container element to be added or to bring back the default ‘homeLink’ option.
