exbreadcrumbs Follow @yiiframework

Extended breadcrumbs widget

EXBreadcrumbs

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 !

Requirements ¶

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

Installation ¶

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

Usage ¶

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).

<?php 
    $this->widget('application.extensions.exbreadcrumbs.EXBreadcrumbs', array(
        'links'=>$this->breadcrumbs,
    )); 
?>

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(
    'links'=>array(
        'crumb1' => array('controller/route1','param1'=>'value1',
            'menu'=>array(
                'menu1'=> array('controller/routeMenu1','paramM1' => 'valueM1'),
                'menu2'=> array('controller/routeMenu2','paramM2' => 'valueM2'),
            )
        ),    
        'crumb2' => array('controller/route2','param2'=>'value2'),
        'yii' => 'http://www.yiiframework.com/',
        'end'
    ),
));

Changes ¶

version 1.0.0.1

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

version 1.0.0.0

initial release

Resources ¶

Total 9 comments

#8927

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

jmariani at 2012/01/29 12:57pm

Cool!

Very nice.

#6448

learner at 2012/01/11 07:39am

very helpful

#6422

fleuryc at 2012/01/09 11:12am

itemCssClass option

Hi!

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

#5523

Raoul at 2011/10/18 04:51am

thanks

@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

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:

$cs->registerCoreScript('jquery')
        ->registerScriptFile($baseUrl.'/xbreadcrumbs.js', CClientScript::POS_HEAD)
        ->registerCssFile($baseUrl.'/xbreadcrumbs.css')
        ->registerScript('Yii.EXBreadcrumbs#'.$id,"$(\"#{$id}\").xBreadcrumbs($options);");

(line 174 of EXBreadcrumbs.php) to:

$cs->registerCoreScript('jquery');
$cs->registerScriptFile($baseUrl.'/xbreadcrumbs.js', CClientScript::POS_HEAD);
$cs->registerCssFile($baseUrl.'/xbreadcrumbs.css');
$cs->registerScript('Yii.EXBreadcrumbs#'.$id,"$(\"#{$id}\").xBreadcrumbs($options);");

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

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

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?

thx..

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

#5485

betelgeuse at 2011/10/15 01:41pm

Thanks!

works perfectly, thanks!

Please login to leave your comment.