how to create custom breadcrumb widget in yii framework

To make a custom breadcrumb in yii framework, try this step :

  1. we must create a new file BreadCrumb.php in your project folder, example :
    my-project\protected\components\BreadCrumb.php. And insert this code into the BreadCrumb.php file :

    class BreadCrumb extends CWidget {
    
         public $crumbs = array();
         public $delimiter = ' / ';
    
         public function run() {
          $this->render('breadCrumb_view');
         }
    }
    
  2. then create a new folder views in : my-project\protected\components\.

  3. make a new file breadCrumb_view.php in my-project\protected\components\views and insert this code to breadCrumb_view.php.

    <ul class="breadcrumb">
     <?php
         foreach($this->crumbs as $crumb) {
            if(isset($crumb['url'])) {
                echo "<li>".CHtml::link($crumb['name'], $crumb['url'])."</li>";
            } else {
                echo "<li>".$crumb['name']."</li>";
            }
            if(next($this->crumbs)) {
                echo $this->delimiter;
            }
        }
     ?>
    </ul>
    

    in this example i use ul html tag for the breadcrumb. you can change the ul and li html tag to another html tag.

  4. and then you can use the breadcrumb in your view with insert this code :
    <?php
    	$this->widget('application.components.BreadCrumb', array(
    	  'crumbs' => array(
    	    array('name' => 'Home', 'url' => array('site/index')),
    	    array('name' => 'Login'),
    	  ),
    	  'delimiter' => '&nbsp;', // if you want to change it
    	));
    ?>
    

    and you can custom your delimiter in your breadcrumb.

 

if you have a question you can leave the message in this post 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s