Yii 1.1: exbreadcrumbs

Extended breadcrumbs widget


This extension is a wrapper for the XBreadcrumb JQuery plugin. It is compatible with the core CBreadcrumbs widget, so no change is needed if you want to turn your old breadcrumbs into super cool extended ones.

Check out the demo !


tested with Yii 1.1.3 (but I see no reason why it would not work for previous Yii versions)


  1. Download and unzip the archive into your protected/extension folder
  2. ...there is nothing else to do !


To turn your default breadcrumbs into super cool extended breadcrumbs, just replace the reference to 'zii.widgets.CBreadcrumbs' by 'application.extensions.exbreadcrumbs.ExBreadcrumbs', which should be located in your main layout (protected/views/layout/main.php).

    $this->widget('application.extensions.exbreadcrumbs.EXBreadcrumbs', array(

But (hopefully) there's more :

  • add a dropdown menu to all (or some) breadcrumbs
  • make your breadcrumbs 'collapsible'
  • define your own custom style

Below is an example where the crumb1 has a dropdown menu containing 2 links. The link associated with crumb2 is defined as a classical Yii url array and at last, the yii crumb url is a simple string.

$this->widget('application.extensions.exbreadcrumbs.EXBreadcrumbs', array(
        'crumb1' => array('controller/route1','param1'=>'value1',
                'menu1'=> array('controller/routeMenu1','paramM1' => 'valueM1'),
                'menu2'=> array('controller/routeMenu2','paramM2' => 'valueM2'),
        'crumb2' => array('controller/route2','param2'=>'value2'),
        'yii' => 'http://www.yiiframework.com/',



  • change Client script registration to be compatible with previous Yii version (trejder)


  • initial release


Total 9 comments

#8927 report it
nervlin at 2012/07/08 10:48am
Css not align in multilingual

In Css

.xbreadcrumbs LI A {
    font-size: 11px;
    color: #666666;
    text-decoration: none;

in my testdrive change to

.xbreadcrumbs LI A {
    font-size: 11px;
    color: #666666;
    text-decoration: none;
    vertical-align: text-bottom;
#6693 report it
jmariani at 2012/01/29 12:57pm

Very nice.

#6448 report it
learner at 2012/01/11 07:39am
very helpful

very helpful

#6422 report it
fleuryc at 2012/01/09 11:12am
itemCssClass option


It would be super nice to have a itemCssClass option just like the CMenu widget.

#5523 report it
Raoul at 2011/10/18 04:51am

@trejder : you're right, thanks for pointing me this ... I'll update the extension as soon as possible

@peterjkambey : I'll take your modification into account too ...

#5520 report it
Trejder at 2011/10/18 03:29am
Required Yii 1.1.5

Hi there,

Yes, this extension looks very good! :] But also yes - I DO see reason, why it should not work in previous versions of Yii! :]

In EXBreadcrumbs.php's line 175 (and I think that only there) you're using method chaining, available since version 1.1.5. So, users of earlier versions can't use your extension, if they don't make a simple change to your code. I.e. changing:

        ->registerScriptFile($baseUrl.'/xbreadcrumbs.js', CClientScript::POS_HEAD)

(line 174 of EXBreadcrumbs.php) to:

$cs->registerScriptFile($baseUrl.'/xbreadcrumbs.js', CClientScript::POS_HEAD);

You should consider changing this by yourself in next release of extension, because this simple change will open it for users of earlier versions of Yii.

And of course there is problem reported by peterjkambey two days ago, that your extension (or rather jQuery code behind it) interferes with jQuery menu or any other menu systems related on it.

#5503 report it
Roopz at 2011/10/17 06:40am
Please change the check the letter case.
<?php $this->widget('application.extensions.exbreadcrumbs.ExBreadcrumbs', array( 'links'=>$this->breadcrumbs, )); ?>


<?php $this->widget('application.extensions.exbreadcrumbs.EXBreadcrumbs', array( 'links'=>$this->breadcrumbs, )); ?>
#5499 report it
Peter JK at 2011/10/16 11:35pm
so great...

wonderful Extension...

thank you, but i have some trouble with jquerymenu about stacking position.. where should i put z-index option on your CSS so it still below jquerymenu CSS?


Updated: ooopppssss... its done :-D just change xbreadcrumbs.css and .xbreadcrumbs { position: relative; z-index: 1; }

#5485 report it
betelgeuse at 2011/10/15 01:41pm

works perfectly, thanks!

Leave a comment

Please to leave your comment.

Create extension